Question

我试图在绘制无用的废话中实现我的梦想。但是在10分钟内学习jQuery之后，我遇到了延迟函数无法正常工作的问题。

所以，我有500个黑人小div与班级＆＃34; luls＆＃34;。这个想法是，当你用鼠标悬停在它们上面时，它们会以随机颜色点亮，一段时间后它们会收回黑色。但他们没有。

$(document).ready(function() {
    $( ".luls" ).each(function(index) {
        $(this).mouseenter(function() {
            // It's just a random color function, do not focus on it.               
            var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
            $(this).css("background-color", hue);
        });
        setTimeout(function() {
            $(this).css('background-color', 'black');
        }, 1000);
    });
});

我尝试使用delay（）和setTimeout，甚至是鼠标悬停，但它不起作用。需要你的帮助。

Answer 1

当你使用setTimeout时，“this”不再是你的意思了。你需要传递它：

$(document).ready(function() {
    $( ".luls" ).each(function(index) {
        $(this).mouseenter(function() {
            // It's just a random color function, do not focus on it.               
            var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
            $(this).css("background-color", hue);
        setTimeout(function(x) {
            x.css('background-color', 'black');
        }, 1000, $(this));          
        });
    });
});

Answer 2

我认为这里不需要使用.each。另外，请务必在$(this)之外的setTimeout()首先声明 { - 1>} - 正如其他人所提到的那样，它将被重新确定范围。

//IGNORE THIS PART (Creating black boxes for example, unrelated to answer) for (var i=0; i < 100; i++) { var $d = $("<div class='luls' />"); $("body").append($d); } $(".luls").mouseenter(function() { var $self = $(this); var hue = 'rgb(' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ')'; $self.css("background-color", hue); setTimeout(function() { $self.css('background-color', 'black'); }, 1000); });

.luls { display: block; float: left; width: 10vw; height: 10vw; background-color: black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

bind'this'到您的功能，例如下面的示例。

$(document).ready(function() {
    $( ".luls" ).each(function(index) {
        $(this).mouseenter(function() {
            // It's just a random color function, do not focus on it.               
            var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
            $(this).css("background-color", hue);
        });
        setTimeout(function() {
            console.log(this);
            $(this).css('background-color', 'black');
        }.bind(this), 1000);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="luls" style="width :100%; height : 20px;" />

循环+ mouseenter中的jQuery setTimeout / delay

3 个答案: