Question

这是显示我目前所拥有的Jsfiddle。我希望这样当用户将鼠标悬停在背景颜色为红色的div上时，setInterval应该停止，以便鼠标悬停在它上面的div应该保持红色，所有其余的div保持默认颜色（白色）。

当鼠标离开div时，设定的间隔继续。

            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", "skyblue");
            }
            i++;
            if( i === arr.length){i =0;} 
                var color = $(".boxes").each(function(){//part of the code i 
                                                // tried adding but doesnt't work
                    $(this).css("background-color")
                })
                console.log(color)
//check the background color to see if its red. Also if the mouse is over the 
//particular div it should clear the interval and when the mouse moves out of the
// the div it should start rotating colors down the row
            }

JSFIDDLE先谢谢。

Answer 1

这个怎么样？我正在添加/删除css类而不是直接设置背景颜色。然后在mousover上，如果设置了红色类，则停止间隔，然后在mouseout上再次启动间隔。必须将setInterval调用保存为变量，以便以后清除它。

$(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].addClass('red');
            else arr[count].removeClass('red');
        }
        i++;
        if (i == arr.length) i = 0;
    }
    var interval = setInterval(bgChange, 2000);

    $(".boxes").mouseover(function(){
        if($(this).hasClass('red')){
            clearInterval(interval);
        }
    });

    $(".boxes").mouseout(function(){
        if($(this).hasClass('red')){
            interval = setInterval(bgChange, 2000);
        }
    });

});

Answer 2

您需要保存setInterval()方法返回的间隔ID，并在需要时使用它清除间隔。请注意，一旦清除，就无法重新启动间隔，但由于您使用的是全局变量，因此您可以启动一个新的间隔，它将在它停止的位置继续。

由于您没有使用类添加红色背景，因此您需要检查颜色本身，并将红色返回为rgb(255, 0, 0)，这是您应该比较的颜色。如果您最终为背景颜色红色添加了一个类，则可以使用$(this).hasClass('className')进行比较。

最后，您需要将鼠标悬停方法添加到.boxes，这样当鼠标悬停时，您可以检查颜色和停止间隔，并在鼠标悬停时开始新的间隔。

Example here.

var arr = [];
var i = 0;
var intervalID = -1;

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

    $(".boxes").hover(function () {
        if ($(this).css('background-color') == "rgb(255, 0, 0)") {
            clearInterval(intervalID);
            intervalID = -1;
        }
    },

    function () {
        if (intervalID == -1) {
            intervalID = setInterval(bgChange, 2000);
        }
    });

    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;
    }
    intervalID = setInterval(bgChange, 2000);
});

[编辑 - 道歉，我错过了你已经有红色课程 - 红色课程updated fiddle]

悬停时的clearInterval以及元素是否具有特定背景

2 个答案: