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

私は別のブロックを追加するまでこれは、正常に動作します：

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

ページのすべてのフェードアイテムが消えるからです。私の質問：このグループ内のアイテムのみを対象にするにはどうすればよいですか？

ここではペンです：http://codepen.io/regmtait/pen/NdLqvP

Answer 1

あなたは以下のスニペットを確認し、親feature-wrapをターゲットに、現在のオブジェクトthisを使用する必要があります。

これが役に立ちます。

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