Jquery 单击一个子元素切换相同 div 的另一个子元素

Question

我有以下代码并且在同一页面上有多个父 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");
});

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

我们将不胜感激。

谢谢！

Answer 1

ID 必须是唯一的 insetad 将 class 作为选择器

像这样

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

Answer 2

As I said Id must be unique (I know this is a little bit confused about id must be unique while it can works fine with css .. but you can try click event here it will just work with the first element https://jsfiddle.net/mohamedyousef1980/1vrdbzgL/ and you can take a look at 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

Note: be sure you include jquery

Answer 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, 淡出.

.editable {
   display: none;
} 

.active .editable {
   display: block;
}

https://jsfiddle.net/hje00xyg/

Jquery 单击一个子元素切换相同 div 的另一个子元素

Jquery on click one sub element toggle another sub element of same div

html

javascript

jquery

children

onclick

我正在尝试这个