Question

我正在尝试创建一个简单的自定义图库。我有两个列表，一个是图像，另一个是图像的缩略图。（像这样：http://cl.ly/3R1a3X0f0H1S1a300j3c）

以下是应用程序屏幕截图的列表：

  <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（）它是应用程序屏幕中的相应屏幕。只是不确定如何真正做到这一点？任何帮助将不胜感激。

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

创建一个jQuery索引来遍历单独的列表

2 个答案: