創建一個jQuery索引來遍歷單獨的列表

我試圖創建一個簡單的自定義庫。我有兩個列表，一個包含圖像，另一個包含圖像縮略圖。（像這樣：http://cl.ly/3R1a3X0f0H1S1a300j3c）創建一個jQuery索引來遍歷單獨的列表

這裏是清單的應用程序的屏幕截圖：

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

這裏是縮略圖列表：第一拇指會

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

默認激活並具有上面顯示的相應屏幕。如果有人點擊第三個拇指，第三個屏幕應該顯示（其餘所有應該隱藏）。

所以我基本上需要給一個.active類一個拇指點擊，以及.show（）它是相應的屏幕在應用程序屏幕。只是不確定如何真正做到這一點？任何幫助將不勝感激。

來源

2012-04-01 Fuego DeBassi

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

來源

2012-04-01 17:07:26 fceruti

謝謝你，真棒！ – 2012-04-01 21:06:46

您可以使用.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"。

來源

2012-04-01 17:07:39

創建一個jQuery索引來遍歷單獨的列表

回答

相關問題