使用 JQuery 循环遍历图像答案

【问题标题】：Looping Through Images using JQuery使用 JQuery 循环遍历图像
【发布时间】：2011-10-05 15:08:29
【问题描述】：

我正在尝试使用 JQuery next() 一次将 CSS 添加到一个图像中以突出显示它。当用户单击一个按钮时，它应该突出显示带有边框的 next() 图像。相反，尽管它突出显示了它之后的所有图像。

$('#imageList img').next().addClass('selected');

不过，它会将类添加到所有图像中。

【问题讨论】：

【解决方案1】：

似乎以下内容对您来说应该很有效，应该将“选定”类添加到不包含该类的集合中的第一个图像中：

$('#imageList img:not(.selected)').eq(0).addClass('selected');

【讨论】：

【解决方案2】：

首先，选择第一张图片：

var img = $('#imageList img:first').addClass('selected');

现在，只要你想突出显示下一张图片，就调用这个函数：

function selectNext() {
    img.removeClass('selected').next().addClass('selected');
}

【讨论】：

【解决方案3】：

这也会让你得到你想要的http://jsfiddle.net/GWtg8/2/

$(document).ready(function(){
$('#btn').click(function(){
    $('#cont img').not('.selected').first().addClass('selected');
});    });

【讨论】：

如何在设置好之前的类之后删除它，以便一次只添加一个选定的类？

【解决方案4】：

试试这个

$(function(){
    var imageList = $('#imageList img'), imgCounter = 0;
    $("buttonSelector").click(function(){
       imageList.eq(imgCounter++).addClass('selected');
    }); 
});

【讨论】：