jquery只显示1个活动元素-jquerydisplayonly1elementactive

作者：幽咽小香 | 来源：互联网 | 2023-09-06 12:40

Icreatedthiscode,clickonapictureandyoullcomeoutthedescriptionbelowtheimage.Iwould

I created this code, click on a picture and you'll come out the description below the image. I would like to improve this code, so I want to be active only one description of a time, so if I click on a image see the description of that just clicked, and hide the last activated. maybe with the code is more clear http://codepen.io/mp1985/pen/qOrpQX

我创建了这段代码,点击图片然后你就可以看到图片下方的描述了。我想改进这个代码,所以我想只激活一个时间的描述,所以如果我点击一个图像,看到刚刚点击的描述,并隐藏最后激活的。也许用代码更清晰http://codepen.io/mp1985/pen/qOrpQX

$( ".spec").click(function() {
    $(this).find(".image, .details-spec").toggle();
    $(this).find(".block-content").toggleClass('white'); 
 });

I tried with toggle(), toggleClass() and not() but without success. any idea? thanks

我尝试使用toggle(),toggleClass()而不是()但没有成功。任何想法?谢谢

3 个解决方案

#1

You can use not() here to avoid clicked element from selector

你可以在这里使用not()来避免选择器中的clicked元素

var $spec = $(".spec").click(function() {
// caching selector $(".spec") for future use
  $spec
    .not(this)
    //  avoiding clicked element
    .find(".image")
    // getting image selector
    .show()
    // showing back image
    .end()
    // back to previous selector
    .find(".details-spec")
    // getting details
    .hide()
    // hiding it
    .end()
    // back to previous selector
    .find(".block-content")
    //  getting block content
    .removeClass('white');
  // removing class white
  $(this)
    .find(".image, .details-spec")
    // getting elements by class
    .toggle()
    // toggling visibility
    .end()
    // back to previous selector  
    .find(".block-content")
    // getting block content    
    .toggleClass('white');
  // toggling class  white
});

.block {
  position: relative;
  height: 300px;
  width: 100%;
  overflow: hidden;
  background: #f9bda1;
  margin-bottom: 1em;
}
.one-thirds > .block {
  background-color: #484343;
  cursor: pointer;
}
.block .image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.one-thirds {
  width: 32%;
  float: left;
  margin-right: 1%;
}
.full {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
h3 {
  font-size: 20px;
}
.details-spec {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.white {
  color: white;
}
.active > .image {
  visibility: hidden;
}
.active .details-spec {
  display: block;
}



  
    
      
      
        Title:
        

          Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem LoremLorem
        

      
    
  

  
    
      
      
        Title:
        
          Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem LoremLorem

        
      
    
  

  
    
      
      
        Title:

        

          Lorem Lorem Lorem Lorem LoremLorem

#2

You don't need that over complex jQuery. Set the styles with css and toggle a single class on the root element.

你不需要复杂的jQuery。使用css设置样式并在根元素上切换单个类。

CSS

.spec.active .image {
  display: none;
}
.spec.active .details-spec {
  display: block;
}
.spec.active .block-content {
  color: white;
}

Javascript

var $spec = $('.spec');

$spec.click(function() {
  $spec.not($(this)).removeClass('active');
  $(this).toggleClass('active');
});

DEMO: http://codepen.io/anon/pen/VvpXXe

#3

First close all ($spec). Second open current.($this)

首先关闭所有($ spec)。第二个开路电流。($ this)

var $spec = $(".spec").click(function() {
    $spec.find(".image, .details-spec").show();
  $spec.find(".block-content").removeClass('white');
  $(this).find(".image, .details-spec").hide();
  $(this).find(".block-content").addClass('white');
});

推荐阅读

javascript
JavaScript进阶之旅：第三阶段深入探索

在《JavaScript进阶之旅：第三阶段深入探索》中，我们将通过一系列复杂的代码示例，深入探讨JavaScript的高级特性与应用技巧。本阶段将重点讲解如何利用用户输入进行动态交互，例如通过提示框获取1到9之间的正整数，并基于此实现更多功能。此外，还将介绍如何优化代码结构，提升程序的可读性和维护性。 ... [详细]

蜡笔小新 2024-10-24 16:31:53
javascript
在 Angular Google Maps 中实现图片嵌入信息窗口功能 - Embedding Images into Info Windows in Angular Google Maps

在 Angular Google Maps 中实现图片嵌入信息窗口的功能，可以通过使用 `@agm/core` 库来实现。该库提供了丰富的 API 和组件，使得开发者可以轻松地在地图上的信息窗口中嵌入图片。本文将详细介绍如何配置和使用这些组件，以实现动态加载和显示图片的功能。此外，还将探讨一些常见的问题和解决方案，帮助开发者更好地集成这一功能。 ... [详细]

蜡笔小新 2024-11-05 10:58:38
web
在JavaScript中实现电子邮件和密码的输入验证 - Implementing Input Validation for Email and Password in JavaScript

本文旨在构建一个JavaScript函数，用于对用户输入的电子邮件地址和密码进行有效性验证。该函数将确保输入符合标准格式，并检查密码强度，以提升用户账户的安全性。通过集成正则表达式和条件判断语句，该方法能够有效防止常见的输入错误，同时提供即时反馈，改善用户体验。 ... [详细]

蜡笔小新 2024-10-24 14:23:11
web
深入理解PHP中的超全局变量与AJAX技术

本文详细介绍了PHP中的几种超全局变量，包括$GLOBAL、$_SERVER、$_POST、$_GET等，并探讨了AJAX的工作原理及其优缺点。通过具体示例，帮助读者更好地理解和应用这些技术。 ... [详细]

蜡笔小新 2024-11-24 16:35:09
replace
为何引入jQuery UI自动完成功能后，我的列表框也受到影响？

我在尝试将组合框转换为具有自动完成功能时遇到了一个问题，即页面上的列表框也被转换成了自动完成下拉框，而不是保持原有的多选列表框形式。 ... [详细]

蜡笔小新 2024-11-24 12:02:48
javascript
深入解析 JavaScript 代码执行流程：理解执行上下文与变量提升机制

本文深入探讨了JavaScript代码的执行流程，重点解析了执行上下文和变量提升机制。通过详细分析代码解析过程，帮助开发者更好地理解JavaScript中的作用域和执行环境，为编写高效、无误的代码提供理论支持。 ... [详细]

蜡笔小新 2024-10-27 10:30:28
javascript
确保当前的this对象准确指向预期的DOM元素

functionCheckAvailableScope(){$(input[namechkXZSYY]).each(function( ... [详细]

蜡笔小新 2024-10-23 21:34:43
javascript
渲染所有可能的元素或根据请求渲染 - Render all possible elements or render on request

SoIhaveanappthathasarightsidebarwhosevisibilityistoggledviaabutton.Inthatsidebar ... [详细]

蜡笔小新 2024-10-19 08:14:13
javascript
Javascript -检查数组的值[重复] - Javascript - check array for value [duplicate]

Thisquestionalreadyhasananswerhere:这个问题已经有了答案:HowdoIcheckifanarrayincludes ... [详细]

蜡笔小新 2024-10-17 15:29:38
const
如何找到我点击的页面（Javascript）

我有一个页面，并且我想使用JavaScript来获取我在页面上单击的任何元素的相对xpath ... [详细]

蜡笔小新 2024-10-09 11:14:27
const
深入解析Java并发之ArrayBlockingQueue

本文详细探讨了ArrayBlockingQueue，这是一种基于数组实现的阻塞队列。ArrayBlockingQueue在初始化时需要指定容量，因此它是一个有界的阻塞队列。文章不仅介绍了其基本概念和数据结构，还深入分析了其源码实现，包括各种入队、出队、获取元素和删除元素的方法。 ... [详细]

蜡笔小新 2024-11-25 03:29:14
eval
如何按顺序获取网页链接？

我有一个包含多个URL的数组。首先，需要同步获取数组中的第一个和第二个URL，当其中任意一个请求完成时，再继续处理第三个URL。这种按序获取的方式可以确保数据的正确性和完整性，避免因并发请求导致的数据混乱。 ... [详细]

蜡笔小新 2024-11-01 15:07:04
web
利用Google Sheets自定义函数实现Ajax调用 - Executing Ajax Requests via Google Sheets Custom Functions

本文探讨了如何在 Google Sheets 中通过自定义函数实现 AJAX 调用。具体介绍了编写脚本的方法，以便在电子表格中发起 AJAX 请求，从而实现数据的动态获取与更新。这种方法不仅简化了数据处理流程，还提高了工作效率。 ... [详细]

蜡笔小新 2024-11-01 09:54:38
web
软件开发史上最具影响力的十位编程大师（附图解）

在软件开发领域，有十位编程大师对行业发展产生了深远影响。本文基于国外知名社区的一项评选，通过图文并茂的形式，详细介绍了这十位杰出人物，包括游戏开发先驱John Carmack等，为读者呈现了他们卓越的技术贡献与创新精神。 ... [详细]

蜡笔小新 2024-10-25 11:23:00
nodejs
如何高效地压缩JavaScript代码以提升网页性能

本篇内容介绍了“javascript如何压缩”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处 ... [详细]

蜡笔小新 2024-10-23 14:37:16

幽咽小香

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章