javascript - JQuery:在父容器中显示/隐藏图像

Question

我有一个 jQuery 问题。

我有多组图像，它们通过单击一些相应的链接来显示/隐藏。标记如下所示:

<div class="feature-wrap">

<!-- my menu -->

<div class="item-select-list-wrap">
 <ul class="item-select-list">
  <li><a class="feature-link" data-category="feature01" href="#">Item 1</a></li>
  <li><a class="feature-link" data-category="feature02" href="#">Item 2</a></li>
</ul>
</div>

<!-- images for toggling -->

<ul class="item-select-image">
 <li class="fadeitem feature-slide feature01"><img src="myimage.jpg"/></li>
 <li class="fadeitem feature-slide feature02"><img src="myimage.jpg"/></li>
</ul>

</div>

默认情况下，有一些 CSS 可以隐藏内容:

.item-select-image li {display: none;}
.item-select-image li:last-child {display: block;}

这是 jQuery:

$('.feature-link').click(function(event) {
    event.preventDefault();
    var feature = $(this).data('category');

    $('.fadeitem').hide();
    $('.' + feature).fadeIn(500);
    $('.feature-link').removeClass('current');
    $('.feature-link.' + feature).addClass('current');
});

这工作正常，直到我添加另一个 block :

<div class="feature-wrap">Another set of this</div>

因为页面上的所有“fadeitem”都会消失。我的问题:如何才能最好地只定位该组中的项目？

这是一支笔:http://codepen.io/regmtait/pen/NdLqvP

Answer 1

您应该使用当前对象 this 来定位父对象 feature-wrap，检查下面的代码片段。

希望这对您有所帮助。

$('.feature-link').click(function(event) {
  event.preventDefault();

  var feature = $(this).data('category');
  var parent = $(this).closest('.feature-wrap');

  $('.fadeitem', parent).hide();
  $('.' + feature).fadeIn(500);
  $('.feature-link', parent).removeClass('current');
  $('.feature-link.' + feature, parent).addClass('current');
});

.item-select-image li {display: none;}
.item-select-image li:last-child {display: block;}

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

<div class="feature-wrap">

  <h2>First set of images</h2>

  <!-- my menu -->

  <div class="item-select-list-wrap">
    <ul class="item-select-list">
      <li><a class="feature-link" data-category="feature01" href="#">Item 1</a></li>
      <li><a class="feature-link" data-category="feature02" href="#">Item 2</a></li>
      <li><a class="feature-link" data-category="feature03" href="#">Item 3</a></li>
    </ul>
  </div>

  <!-- images for toggling -->

  <ul class="item-select-image">
    <li class="fadeitem feature-slide feature01"><img src="http://placehold.it/200x100/00ff00"/></li>
    <li class="fadeitem feature-slide feature02"><img src="http://placehold.it/200x100/ffff00"/></li>
    <li class="fadeitem feature-slide feature03"><img src="http://placehold.it/200x100/ff00ff"/></li>
  </ul>   
</div>


<div class="feature-wrap">

  <h2>Second set of images</h2>

  <!-- my menu -->

  <div class="item-select-list-wrap">
    <ul class="item-select-list">
      <li><a class="feature-link" data-category="feature04" href="#">Item 4</a></li>
      <li><a class="feature-link" data-category="feature05" href="#">Item 5</a></li>
      <li><a class="feature-link" data-category="feature06" href="#">Item 6</a></li>
    </ul>
  </div>

  <!-- images for toggling -->

  <ul class="item-select-image">
    <li class="fadeitem feature-slide feature04"><img src="http://placehold.it/200x100/00ff00"/></li>
    <li class="fadeitem feature-slide feature05"><img src="http://placehold.it/200x100/ffff00"/></li>
    <li class="fadeitem feature-slide feature06"><img src="http://placehold.it/200x100/ff00ff"/></li>
  </ul>   
</div>