创建一个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()它是相应的屏幕在应用程序屏幕。只是不确定如何真正做到这一点?任何帮助将不胜感激。
答
$('.apps-thumbs li').click(function(){
var index = $(this).index();
$('.app-screens li.selected').each(function(){
$(this).removeClass('selected');
});
$('.app-screens').children()[index].addClass('selected');
});
答
您可以使用.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;
});
});
他们不是在小提琴的图像,但你可能可以看到它会如何工作了同样的方式,如果他们。
在这里,我将DOMReady中的show(0)
设置为显示第一个图像,但这同样可以通过简单地更改标记完成,以便第一个元素始终具有class="active"
。
谢谢你,真棒! – 2012-04-01 21:06:46