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");
});

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

任何帮助将不胜感激。

谢谢！

Answer 1

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

喜欢这个

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

Answer 2

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

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

in 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

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 淡入淡出， fadeOut 。

.editable {
   display: none;
} 

.active .editable {
   display: block;
}

https://jsfiddle.net/hje00xyg/

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

我正在尝试这个

3 个答案: