Question

我有3个div，我想要一个接一个地突出显示（使用css类）。之后循环重新启动并应该做同样的事情。但它没有用。

这一定是显而易见的......

<script>
$('.ticker').each(function(i) {
var elem = $(this);
var prev = $(this).prev();
setTimeout(function() {
    elem.addClass("selected");
    prev.removeClass("selected");
}, i * 2000);
});
</script>

Answer 1

重写了你的代码。新小提琴here。

基本上，你想改变思路。设置间隔，并在间隔上更改它，而不是setTimeout上的偏移。否则，您需要在setInterval中执行setTimeout以确保它们间隔均匀。

新守则：

// Setup an interval timer
setInterval(function () {
    // Get currently selected element
    var select = $('.ticker.selected');
    // Remove the class
    select.removeClass('selected');
    if(select.next('.ticker').length > 0) {
        // If we have more to go, select the next one
        select.next().addClass('selected');
    } else {
        // Otherwise restart
        $('.ticker').eq(0).addClass('selected');
    }
}, 2000);
// Initialize the selected class
$('.ticker').eq(0).addClass('selected');

Answer 2

你这样做，http://jsfiddle.net/6M65S/13/

var play = function(){
    var $ticker = $('.ticker'),
        $curTicker = $('.ticker').filter('.selected');
    $ticker.removeClass('selected');
    if(!$curTicker.is(':last')) {
        $curTicker.next().addClass('selected');
    } else {
        $ticker.first().addClass('selected');
    }   
};
setInterval(play, 1000);

Answer 3

根据Ktash的回答，这是一个简化的版本：

// Setup an interval timer
setInterval(function () {
    var next = $('.ticker.selected').removeClass('selected').next('.ticker').addClass('selected');
    if(!next.length) {
        $('.ticker:first').addClass('selected');
    }
}, 2000);
// Initialize the selected class
$('.ticker:first').addClass('selected');

Jquery Infinite Loop无法正常工作

3 个答案: