使用JQuery循环图像

Question

我正在尝试使用JQuery next()将CSS添加到一个图像在一个时间突出显示它。当用户单击按钮时，它应该突出显示带有边框的next()图像。相反，它会高亮显示它后面的所有图像。

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

它将类添加到所有的图像。

Answer 1

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

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

Answer 2

首先，选择第一张图片:

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

现在，当你想突出显示下一张图片时，调用这个函数:

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

Answer 3

试试这个

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

Answer 4

似乎下面应该为您工作得很好，应该将"selected"类添加到集合中不包含该类的第一个图像:

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