1
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>
デフォルトで物事を非表示にするには、いくつかの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