1

嗨，我正在尝试让一排 div 闪烁，但一次应该有一个 div 闪烁。（并非所有 div 都应该同时闪烁 [我可以这样做]）..

有点像红绿灯的工作方式。每个灯都是一排灯的一部分，每个灯一次打开和关闭一个，通过一个循环。在我的例子中，闪烁是为了提醒用户 div 或可点击。

我将每个盒子放在一个数组中，但我不知道如何在循环中更改每个盒子的颜色。我想解决这个问题的一种方法是添加和删除包含颜色的类，它应该在 1 或 2 秒后执行此操作，因此 setInterval 应该发挥作用。我想不通。

但这是我悲伤的代码

            var arr =[];
        $(".boxes").each(function(){
            arr.push($(this));
        });     

      function bgChange(){

            for(i = 0; i < arr.length; i++){
            arr[i].addClass("red"); 
            }           
        }
            setInterval(bgChange, 2000);

    });

我期待看到你们可以想出的创造性方法来完成这项工作。

JSFIDDLE 提前 谢谢你

4

4 回答 4

3

尝试：

    var arr = $(".boxes");

    var current = 0;
    function bgChange(){
         if (arr.length > 0){
            //Remove class of all items
            arr.removeClass("red");
            //Set Class of current item
            arr.eq(current).addClass("red");     
            //Increase the current index
            current = (current + 1) % arr.length;
         }
    }
    setInterval(bgChange, 2000);

演示

于 2013-09-15T09:14:11.510 回答
2

您可以尝试使用以下代码进行操作。演示

$(document).ready(function () {
    var arr = [];
    var i = 0;

    $(".boxes").each(function () {
        arr.push($(this));
    });

    function bgChange() {
        for (var count = 0; count < arr.length; count++) {
            if (i == count) arr[count].css('background-color', 'red');
            else arr[count].css('background-color', 'white');
        }
        i++;
        if (i === arr.length) i = 0;
    }
    setInterval(bgChange, 2000);

});

编辑：如果你想通过使用 CSS 类来做到这一点，修改 for 循环如下：

    for (var count = 0; count < arr.length; count++) {
        if (i == count) arr[count].addClass('red');
        else arr[count].removeClass('red');
    }
于 2013-09-15T09:13:00.603 回答
1

尝试

var $boxes = $(".boxes");

function bgChange(){
    var $active = $boxes.filter('.red'), $next = $active.next('.boxes');
    if(!$next.length){
        $next = $boxes.first();
    }

    $active.removeClass('red');
    $next.addClass('red');
}
setInterval(bgChange, 2000);

演示：小提琴

于 2013-09-15T09:27:05.827 回答
0

您可以使用toggleClass设置当前框的类来执行此操作：

var boxes = $(".boxes");
var current = 0;

function animate() {
    boxes.each(function(index) {
        $(this).toggleClass("red", index == current);
    });
    current = (current + 1) % boxes.length;
    setTimeout(animate, 1000);
};

animate();

jsFiddle 演示

于 2013-09-15T09:40:13.537 回答