0

我正在尝试编写一个代码，在有限的时间内向 div 添加一个类，然后将其删除。
我尝试使用 javascript 的 setTimeout 和 jQuery 的延迟，但没有任何效果。
该元素已设置但从未删除。

这是我想出的： 

window.onload = function() {
    $(".button").click(handler);
}

function handler() {
    $(this).addClass("onclick");
    setTimeout(function() { $(this).removeClass("onclick"); }, 3000); // JS's setTimeout

    $(this).addClass("onclick").delay(3000).removeClass("onclick"); // jQuery's delay
}

我不明白出了什么问题......我什至尝试为 setTimeout 函数编写第二个处理程序。

提前致谢。

4

2 回答 2

5

您遇到的问题是this您传递给的函数内部与setTimeout外部函数不同。通常的解决方法是通过创建一个变量来保存它，并使用该变量来使用闭包：

function handler() {
    var $elm = $(this);

    $elm.addClass("onclick");
    setTimeout(function() {
        $elm.removeClass("onclick");
    }, 3000);
}

在那里，我还使用 var 来缓存结果，$(this)因为不止一次这样做是没有意义的。

更多背景：

在 JavaScript 中，与一些看起来相似的语言不同，this它完全由函数的调用方式定义。当您使用setTimeout时，调用函数的方式将成为this全局对象（window浏览器上的 , ），这就是为什么$(this).removeClass(...)不起作用的原因。

this如果您有兴趣，请进一步了解：

于 2012-06-15T08:58:53.633 回答
2

thissetTimeout 调用内部不引用单击的元素。

将其更改为：

function handler() {
    var t = $(this);
    t.addClass("onclick");
    setTimeout(function() { t.removeClass("onclick"); }, 3000);
}

工作示例 - http://jsfiddle.net/5vakN/

thisjavascript中如何工作的参考- http://bonsaiden.github.com/JavaScript-Garden/#function.this

于 2012-06-15T08:59:01.567 回答