jQuery单击时显示/隐藏div，仅针对子级

我需要在同一页面上多次单击显示/隐藏div。每个按钮应仅影响其子按钮

我可以让它在一个容器中工作，如下所示：

HTML:

但对于多个容器，我不能：

我知道这听起来是个愚蠢的问题，但我尝试将其包装在

each（）

函数中，或者使用

children（）

但无法使其工作。多谢各位

---

注意：我无法将ID添加到容器中，因为它们是动态生成的

为什么不将

closest（）

与

find（）

closest（）

$('.showSingle').click(function(){
      $(this).closest('.container').find('.targetDiv').hide();
      $(this).closest('.container').find('#div'+$(this).attr('target')).show();
});

仅供参考，对DOM中的多个元素使用相同的ID是不好的做法，请使用类而不是ID


jQuery（函数（）{
jQuery（'#showall'）。单击（函数（）{
jQuery（'.targetDiv'）.show（）；
});
$（'.showSingle'）。单击（函数（）{
$（this）.closest（'.container'）.find（'.targetDiv'）.hide（）；
$（this）.closest（'.container'）.find（'#div'+$（this.attr（'target'））.show（）；
});
});
.container{
边缘顶部：20px；
}

第一组
第2组
第3组
第4组
益母草
益母草
益母草
第一组
第2组
第3组
第4组
益母草
益母草
益母草
为什么不将
最近的（）
与
查找（）

closest（）

$('.showSingle').click(function(){
      $(this).closest('.container').find('.targetDiv').hide();
      $(this).closest('.container').find('#div'+$(this).attr('target')).show();
});

仅供参考，对DOM中的多个元素使用相同的ID是不好的做法，请使用类而不是ID


jQuery（函数（）{
jQuery（'#showall'）。单击（函数（）{
jQuery（'.targetDiv'）.show（）；
});
$（'.showSingle'）。单击（函数（）{
$（this）.closest（'.container'）.find（'.targetDiv'）.hide（）；
$（this）.closest（'.container'）.find（'#div'+$（this.attr（'target'））.show（）；
});
});
.container{
边缘顶部：20px；
}

第一组
第2组
第3组
第4组
益母草
益母草
益母草
第一组
第2组
第3组
第4组
益母草
益母草
益母草
这可能会对您有所帮助

jQuery(function(){
  jQuery('.showSingle').click(function(){
       var target = jQuery(this).attr('target');
       var targetDiv = jQuery("#div"+target);
       jQuery(this).parents('.container').find('.targetDiv').hide(); 
       jQuery(this).parents('.container').find(targetDiv).show();
   });
});

这可能对你有帮助

jQuery(function(){
  jQuery('.showSingle').click(function(){
       var target = jQuery(this).attr('target');
       var targetDiv = jQuery("#div"+target);
       jQuery(this).parents('.container').find('.targetDiv').hide(); 
       jQuery(this).parents('.container').find(targetDiv).show();
   });
});


id
属性在同一文档中应该是唯一的，因此您必须将重复的
id
s更改为类
不要直接在标签中使用像
target
这样的属性。请使用
data-*
属性，因此您的属性应该是
data target

示例：

<div class="container">

    <div class="buttons">
        <a  class="showSingle" data-target="1">Div 1</a>
        <a  class="showSingle" data-target="2">Div 2</a>
        <a  class="showSingle" data-target="3">Div 3</a>
        <a  class="showSingle" data-target="4">Div 4</a>
    </div>

    <div class="targetDiv div1">Lorum Ipsum1</div>
    <div class="targetDiv div2">Lorum Ipsum2</div>
    <div class="targetDiv div3">Lorum Ipsum3</div>

</div>


希望这有帮助。

id
属性在同一文档中应该是唯一的，因此您必须将重复的
id
s更改为类
不要直接在标签中使用像
target
这样的属性。请使用
data-*
属性，因此您的属性应该是
data target

示例：

<div class="container">

    <div class="buttons">
        <a  class="showSingle" data-target="1">Div 1</a>
        <a  class="showSingle" data-target="2">Div 2</a>
        <a  class="showSingle" data-target="3">Div 3</a>
        <a  class="showSingle" data-target="4">Div 4</a>
    </div>

    <div class="targetDiv div1">Lorum Ipsum1</div>
    <div class="targetDiv div2">Lorum Ipsum2</div>
    <div class="targetDiv div3">Lorum Ipsum3</div>

</div>


希望这有帮助。
ID在文档上下文中必须是唯一的ID在文档上下文中必须是唯一的