JQuery: Bilder im übergeordneten Container ein-/ausblenden

Question

Ich habe eine jQuery Frage.

Ich habe mehrere Gruppen von Bildern, die durch Klicken auf entsprechende Links anzeigen/verbergen. Das Markup sieht wie folgt aus:

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

Es gibt einige CSS Dinge standardmäßig zu verstecken:

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

Und hier ist die 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'); 
}); 

Dies funktioniert gut, bis ich einen anderen Block hinzufügen :

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

, weil alle 'Fa- deitems auf der Seite verschwinden. Meine Frage: Wie kann ich am besten nur auf die Gegenstände innerhalb dieser Gruppe zielen?

Hier ist ein Stift: http://codepen.io/regmtait/pen/NdLqvP

Answer 1

Sie sollten das aktuelle Objekt this verwenden unter den übergeordneten feature-wrap, überprüfen Sie die Schnipsel zielen.

Hoffe, das hilft.

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