JQuery显示/隐藏避免多个组中的冲突

Question

我有一个简单的导航，它显示/隐藏 div 并向导航添加/删除一个活动类。它运作良好，但如果我的页面上有类似的部分，它们会发生冲突（单击第一个导航中的链接也会隐藏其他部分中的 div。

如何在没有“数据组 a”与“数据组 b”冲突的情况下有多个显示/隐藏部分实例？

我的 HTML：

<section class="show-hiders" data-group="a">
    <div class="col-md-6">

        <ul class="nav nav-pills">
            <li class="active"><a href="" data-related="1">Subject 1</a></li>
            <li><a href="" data-related="2">Subject 2</a></li>
            <li><a href="" data-related="3">Subject 3</a></li>
        </ul>

      <div  class="show-hider show-first" data-id="1">
        <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic1" alt="" />
      </div>
      <div  class="show-hider" data-id="2">
          <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic2" alt="" />
      </div>
      <div  class="show-hider" data-id="3">
        <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic3" alt="" />
      </div>
    </div>

    <div class="col-md-6">
          <div class="show-hider show-first" data-id="1">
            <p>Text content 1</p> 
          </div>
          <div class="show-hider" data-id="2">
             <p>Text content 2</p>   
          </div>
          <div class="show-hider" data-id="3">
            <p>Text content 3</p> 
          </div>
    </div>
</section>

<section class="show-hiders" data-group="b">
    <div class="col-md-6">

        <ul class="nav nav-pills">
            <li class="active"><a href="" data-related="4">Subject 4</a></li>
            <li><a href="" data-related="5">Subject 5</a></li>
            <li><a href="" data-related="6">Subject 6</a></li>
        </ul>

      <div  class="show-hider show-first" data-id="4">
        <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic4" alt="" />
      </div>
      <div  class="show-hider" data-id="5">
          <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic5" alt="" />
      </div>
      <div  class="show-hider" data-id="6">
        <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic6" alt="" />
      </div>
    </div>

    <div class="col-md-6">
          <div class="show-hider show-first" data-id="4">
            <p>Text content 4</p> 
          </div>
          <div class="show-hider" data-id="5">
             <p>Text content 5</p>   
          </div>
          <div class="show-hider" data-id="6">
            <p>Text content 6</p> 
          </div>
    </div>
</section>

我的 jQuery：

//SHOW-HIDERS
$(".show-hider").each(function(){
     $(this).hide();
    if($(this).attr('class') == 'show-hider show-first') {
        $(this).show();
    }
});

$('.show-hiders .nav a').on( "click", function(e) {
    e.preventDefault();
    var id = $(this).attr('data-related'); 
    $(".show-hider").each(function(){
        $(this).hide();
        if($(this).attr('data-id') == id) {
            $(this).show();
        }
    });
});

$('.show-hiders .nav li').on('click', function(){
    $(this).siblings().removeClass('active')
    $(this).addClass('active');
})

Answer 1

您可以使用.closest() 查找最接近的上升元素，以查找您所在的<section> - 如果您随后保存此选择，您可以使用.find() 和您的其他选择器来确保您我只会在 <section> 中搜索

//SHOW-HIDERS
$(".show-hider").each(function() {
  $(this).hide();

  if ($(this).attr('class') == 'show-hider show-first') {
    $(this).show();
  }
});

$('.show-hiders .nav a').on("click", function(e) {
  e.preventDefault();
  // Return the <section> element that we're in
  const $group = $(this).closest('section[data-group]');
  let id = $(this).attr('data-related');
  
  // Find the '.show-hider' elements within the <section>
  $group.find(".show-hider").each(function() {
    $(this).hide();
    
    if ($(this).attr('data-id') == id) {
      $(this).show();
    }
  });
});

$('.show-hiders .nav li').on('click', function() {
  $(this).siblings().removeClass('active')
  $(this).addClass('active');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="show-hiders" data-group="a">
  <div class="col-md-6">

    <ul class="nav nav-pills">
      <li class="active"><a href="" data-related="1">Subject 1</a></li>
      <li><a href="" data-related="2">Subject 2</a></li>
      <li><a href="" data-related="3">Subject 3</a></li>
    </ul>

    <div class="show-hider show-first" data-id="1">
      <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic1" alt="" />
    </div>
    <div class="show-hider" data-id="2">
      <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic2" alt="" />
    </div>
    <div class="show-hider" data-id="3">
      <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic3" alt="" />
    </div>
  </div>

  <div class="col-md-6">
    <div class="show-hider show-first" data-id="1">
      <p>Text content 1</p>
    </div>
    <div class="show-hider" data-id="2">
      <p>Text content 2</p>
    </div>
    <div class="show-hider" data-id="3">
      <p>Text content 3</p>
    </div>
  </div>
</section>

<div>DEMO</div>
<div>DEMO</div>
<div>DEMO</div>

<section class="show-hiders" data-group="b">
  <div class="col-md-6">

    <ul class="nav nav-pills">
      <li class="active"><a href="" data-related="4">Subject 4</a></li>
      <li><a href="" data-related="5">Subject 5</a></li>
      <li><a href="" data-related="6">Subject 6</a></li>
    </ul>

    <div class="show-hider show-first" data-id="4">
      <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic4" alt="" />
    </div>
    <div class="show-hider" data-id="5">
      <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic5" alt="" />
    </div>
    <div class="show-hider" data-id="6">
      <img class="img-responsive" src="https://via.placeholder.com/600x350?text=pic6" alt="" />
    </div>
  </div>

  <div class="col-md-6">
    <div class="show-hider show-first" data-id="4">
      <p>Text content 4</p>
    </div>
    <div class="show-hider" data-id="5">
      <p>Text content 5</p>
    </div>
    <div class="show-hider" data-id="6">
      <p>Text content 6</p>
    </div>
  </div>
</section>