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

这很好用，直到我添加另一个块：

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

因为页面上的所有'fadeitem'都会消失。我的问题：我怎样才能最好地只定位这个群组中的项目？

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

Answer 1

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

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

JQuery：在父容器中显示/隐藏图像

1 个答案: