jQuery Show/hide 点击 div，仅针对儿童

Question

我需要 show/hide 在同一页面上多次点击 div。每个按钮应该只影响它的子按钮。

我可以让它为一个容器工作，像这样：

HTML:

<div class="container">

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

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

</div>

JS:

jQuery(function(){

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

但我不能用于多个容器： JSFiddle

我知道这听起来是个愚蠢的问题，但我尝试将其包装在 each() 函数中，或者使用 children() 但无法使其工作。谢谢

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

Answer 1

你为什么不使用 closest() 和 find()

closest() 将获得最近的选择器，然后您可以找到所需的 children 仅供尊敬的 parent。

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

仅供参考，对 DOM 中的多个元素使用相同的 ID 不是好习惯，请使用 class 而不是 ID。

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

.container {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

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

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

</div>

<div class="container">

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

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

</div>

Answer 2

这可能对你有帮助，

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

Answer 3

Working fiddle.

id 属性在同一文档中应该是唯一的，因此您必须将重复的 id 更改为类。

不要直接在标签中使用 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>

使用 closest() 和 find() 到 show/hide 你的 div 和 .data() 从 data-* 属性中获取值 :

jQuery(function(){
    jQuery('.showSingle').click(function(){
        var target = jQuery(this).data('target');
        var parent = jQuery(this).closest('.container');

        parent.find('.targetDiv').hide();
        parent.find('.div'+target).show();
    });
});

希望对您有所帮助。

jQuery Show/hide 点击 div，仅针对儿童

jQuery Show/hide divs on click, target only children

jquery

show-hide