Erstellen eines jQuery-Indexes zum Durchlaufen separater Listen

Question

Ich versuche, eine einfache, benutzerdefinierte Galerie zu erstellen. Ich habe zwei Listen, eine mit Bildern und eine mit Miniaturbildern. (Wie so: http://cl.ly/3R1a3X0f0H1S1a300j3c)

Hier ist die Liste für die Anwendung Screenshots:

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

Und hier ist die Liste für die Thumbnails:

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

standardmäßig die erste Daumen gehen wird aktiv sein und den entsprechenden Bildschirm darüber anzeigen lassen. Wenn jemand auf den dritten Daumen klickt, sollte der dritte Bildschirm erscheinen (und der ganze Rest sollte versteckt sein).

Also ich muss im Grunde eine .active Klasse zu einem Daumen beim Klicken geben, sowie .show() es ist entsprechenden Bildschirm in app-Bildschirme. Nur nicht sicher, wie man das wirklich macht? Jede Hilfe würde sehr geschätzt werden.

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

können Sie .index() verwenden Sie den Index eines Elements in seiner Mutter zuzugreifen. Wenn Sie den Index kennen, können Sie .eq(1) oder $('parent:eq(1)'); verwenden, um auf ein Element dieses Index in einem anderen übergeordneten Element zuzugreifen.

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

Sie sind keine Bilder in der Geige, aber man kann wohl sehen, wie es auf die gleiche Weise funktionieren würde, wenn sie waren.

Hier setze ich show(0) auf DOMReady, um das erste Bild anzuzeigen, aber das hätte genauso gut getan werden können, indem man einfach das Markup so ändert, dass das erste Element immer class="active" hat.