创建一个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索引来遍历单独的列表

回答

相关问题