Question

我需要在同一页面上多次点击显示/隐藏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()将获得最近的选择器，然后您就可以找到所尊重父母所需的子项。

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

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

＆＃13;

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

＆＃13;

.container {
  margin-top: 20px;
}

＆＃13;

<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>

＆＃13;

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()一起显示/隐藏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在点击时显示/隐藏div，仅限目标儿童

3 个答案: