hide/showにクラスを反復する

Question

クラス「画像」を持つ複数のdivと、クラス「サムネイル」を持つ複数のdiv（両方ともユーザーの追加量に基づいて可変にすることができますが、常にサムネイルは画像を使用して生成されます）最初のイメージから来る最初の親指）私は隠されているすべての親指のdivを持っていますが、最初のものは、すでに使用して：

$('.image:not(:first)').hide(); 

私は第二の親指をクリックすると、サムネイルのクラスを反復処理し、それが第2の画像を表示し、他を非表示にしたいです、3番目のサムをクリックすると3番目の画像です。

jQueryでこれをどうやって行いますか？

Answer 1

2つをリンクする方法をいくつか作成する必要があります。この例では、要素のインデックスを使用します。その後、CSSクラスを使用して表示状態を切り替えることができます。

http://jsfiddle.net/ZCuYM/1/

$('.thumb').click(function() { 
    //switch active thumb 
    $('.thumb.active').removeClass('active'); 
    $(this).addClass('active'); 

    //switch active image 
    $('.image.active').removeClass('active'); 
    $('.image').eq($(this).index()).addClass('active'); 
});​ 

Answer 2

あなたが他の人を隠しつつ、第2の親指をクリックして、第2の画像を表示したい場合は、以下のコードが実行する必要があります。この場合

<div class="image"></div> 
<div class="thumb"></div> 
<div class="image"></div> 
<div class="thumb"></div> 

$('.thumb').click(function() { 
    $('.image').hide(); 
    $(this).prev('.image').show(); 
}); 

あなたが.thumbをクリックすると、すべての.imageの要素があります現在クリックされている.thumbが表示される前の.imageが表示されます。要素をリアルタイムで追加する場合は、クリックイベントに.on（）を使用することを検討することがあります。