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

我有一个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>

下面是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都会消失。我的问题是：如何才能最好地只针对该组中的项目

---

这里有一支笔：

您应该使用当前对象

this

以父对象

功能包为目标，检查下面的代码段

希望这有帮助


$（'.feature link'）。单击（函数（事件）{
event.preventDefault（）；
var feature=$（this.data（'category'）；
var parent=$（this）.closest（'.feature wrap'）；
$（'.fadeitem'，父.hide（）；
$（'.+特征）.fadeIn（500）；
$（'.featurelink'，parent）.removeClass（'current'）；
$（'.feature link.'+feature，parent）.addClass（'current'）；
});
。项目选择图像{显示：无；}
.item选择图像li:last child{display:block；}

第一组图像










第二组图像











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