创建一个 jQuery 索引以循环浏览单独的列表答案

【问题标题】：Creating a jQuery index to cycle through separate lists创建一个 jQuery 索引以循环浏览单独的列表
【发布时间】：2012-04-01 16:58:07
【问题描述】：

我正在尝试创建一个简单的自定义图库。我有两个列表，一个带有图像，一个带有图像缩略图。（比如：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() 它是应用程序屏幕中的相应屏幕。只是不确定如何实际做到这一点？任何帮助将不胜感激。

【问题讨论】：

标签： jquery list indexing gallery

【解决方案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');
});

【讨论】：

【解决方案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

它们不是小提琴中的图像，但您可能会看到如果它们是相同的方式。

在这里，我将show(0) 设置为 DOMReady 以显示第一张图像，但这同样可以通过简单地更改标记来完成，以便第一个元素始终具有class="active"。

【讨论】：