Jquery点击一个子元素切换同一div的另一个子元素答案

【问题标题】：Jquery on click one sub element toggle another sub element of same divJquery点击一个子元素切换同一div的另一个子元素
【发布时间】：2015-12-27 08:40:36
【问题描述】：

我有以下代码，并且在同一页面上有多个父 div。

<div class="full-width" id="edit">
   <img id="edit-click" class="responsive" src="./images/icon.png">
   <div id="editable" class="editable"> 1 </div>
</div>

<div class="full-width" id="edit">
   <img id="edit-click" class="responsive" src="./images/icon.png">
   <div id="editable" class="editable"> 2 </div>
</div>

我想要实现的是：单击图像（#edit-click）时，子元素（#editable）div 应该只为那个特定的父 div 打开。

我怎样才能做到这一点..？

我正在尝试这个

$('#edit').on('click', '#edit-click', function (e) {
   $(this).children('#editable').fadeIn( "slow");
});

但这不是针对同一父 div 的#editable div :(

我们将不胜感激。

谢谢！

【问题讨论】：

你可以使用类来实现，但不要对多个元素使用相同的 id .. 你可以看看我的回答
我知道这有点困惑 id 必须是唯一的，而它可以与 css 一起正常工作.. 但是你可以在这里尝试点击事件它只会与第一个元素一起工作 jsfiddle.net/mohamedyousef1980/1vrdbzgL跨度>

标签： javascript jquery html onclick children

【解决方案1】：

Id 必须是唯一的 insetad 以类作为选择器

这样

$(".full-width").on("click", ".responsive", function() {
  $(this).siblings(".editable").fadeIn("slow");
})

【讨论】：

它不适用于 .closest。但与 .siblings 一起工作得很好。谢谢！

【解决方案2】：

正如我所说，Id 必须是唯一的（我知道这有点混乱 about id 必须是唯一的，而它可以与 css 一起正常工作.. 但是你可以在这里尝试点击事件它只适用于第一个元素 https://jsfiddle.net/mohamedyousef1980/1vrdbzgL/ 你可以参加看着 Does ID have to be unique in the whole page?

所以你的代码应该是这样的

在html中

<div class="full-width" id="edit1">
   <img id="edit-click1" class="responsive" src="./images/icon.png">
   <div id="editable1" class="editable"> 1 </div>
</div>

<div class="full-width" id="edit2">
   <img id="edit-click2" class="responsive" src="./images/icon.png">
   <div id="editable2" class="editable"> 2 </div>
</div>

在js中你需要使用.closest()和.find()

$('.full-width').on('click', '.responsive', function (e) {
   $(this).closest('.full-width').find('.editable').fadeIn( "slow");
});

Working Demo

附加，您可以使用 fadeToggle

$('.full-width').on('click', '.responsive', function (e) {
   var getEditable = $(this).closest('.full-width').find('.editable');
   $('.editable').not(getEditable).hide();
   getEditable.fadeToggle( "slow");
});

Working Demo

注意：确保包含 jquery

【讨论】：

嘿 Yousef 感谢您将唯一 ID 部分添加到我的知识中。非常感谢！！
@JasdeepSingh 很高兴听到这个消息......祝你好运:)

【解决方案3】：

你最好这样做。

<div class="full-width" id="edit1">
   <img class="edit-click responsive" src="http://lorempixel.com/50/50">
   <div id="editable1" class="editable"> 1 </div>
</div>

<div class="full-width" id="edit2">
  <img class="edit-click responsive" src="http://lorempixel.com/50/51">
  <div id="editable2" class="editable"> 2 </div>
</div>

使用类而不是 ID。

并使用 CSS 类代替 jQuery fadeIn、fadeOut。

.editable {
   display: none;
} 

.active .editable {
   display: block;
}

https://jsfiddle.net/hje00xyg/

【讨论】：