jQueryインデックスを作成して別のリストを循環させる

Question

私は単純なカスタムギャラリーを作成しようとしています。私は2つのリストを持っています.1つは画像あり、もう1つはサムネイル画像です。 （そのように：http://cl.ly/3R1a3X0f0H1S1a300j3c）ここ

は、アプリケーションのスクリーンショットのためのリストです：

<ul class="app-thumbs"> 
     <li><a href=""/><img src="img/thumb-1.png" alt="" /></a></li> 
     <li><a href=""/><img src="img/thumb-2.png" alt="" /></a></li> 
     <li><a href=""/><img src="img/thumb-3.png" alt="" /></a></li> 
     <li><a href=""/><img src="img/thumb-4.png" alt="" /></a></li> 
    </ul> 

最初の親指が起こっているデフォルト：

<ul class="app-screens"> 
    <li><img src="img/app-1.png" alt="Caption" /></li> 
    <li><img src="img/app-2.png" alt="Caption" /></li> 
    <li><img src="img/app-3.png" alt="Caption" /></li> 
    <li><img src="img/app-4.png" alt="Caption" /></li> 
    </ul> 

そして、ここでは、サムネイルのためのリストですその上に対応する画面が表示されます。誰かが3番目の親指をクリックすると、3番目の画面が表示されます（残りはすべて非表示にする必要があります）。

私は基本的にクリックするだけでなく、.show（）の親指に.activeクラスを与える必要がありますそれはアプリ画面の対応する画面です。実際にそれをどうやって行うのか分かりません。どんな助けでも大歓迎です。

Answer 1

$('.apps-thumbs li').click(function(){ 
    var index = $(this).index(); 
    $('.app-screens li.selected').each(function(){ 
     $(this).removeClass('selected'); 
    }); 
    $('.app-screens').children()[index].addClass('selected'); 
}); 

Answer 2

.index()を使用すると、親の要素のインデックスにアクセスできます。インデックスがわかっている場合は、.eq(1)または$('parent:eq(1)');を使用して、別の親のインデックスの要素にアクセスできます。

function show(x) { 
    $('.app-screens li').removeClass('active'); 
    $('.app-screens li').eq(x).addClass('active'); 
} 

$(function() { 
    show(0); 

    $('.app-thumbs a').click(function() { 
     show($(this).closest('li').index());   
     return false; 
    }); 
});​ 

Fiddle

彼らはフィドルの画像じゃない、しかし、あなたはおそらく、彼らがいたならば、それは同じようにうまくしたいかを見ることができます。

DOMReadyで最初の画像を表示するにはshow(0)を設定していますが、これは最初の要素が常にclass="active"になるようにマークアップを変更するだけでも同様に実行できます。