Question

我正在尝试将类添加到父div内.color之后的下一个元素，然后在800毫秒后我希望删除该类。

我的代码如下：

$(".color").click( function () { 
  $(this).next().addClass("class");
  setTimeout(function(){ $(this).next().removeClass("class"); }, 800); 
})

添加类可以正常工作，但是删除类存在问题。问题可能在setTimeout（）函数的范围内，但我无法弄清楚。

也许一些简短的解释可以对我有所帮助。谢谢。

Answer 1

可以通过使用箭头函数来解决对setTimeout()的调用，如下所示：

$(".color").click( function () {

    $(this).next().addClass("class");

    // Use arrow function to resolve the "access to context" problem
    setTimeout(() => { $(this).next().removeClass("class"); }, 800); 
})

箭头函数this的概念与常规函数略有不同。

与默认情况下具有自己的this实例的常规函数不同，箭头函数改为从其调用上下文继承this。这意味着上方箭头功能的this与this功能的click()相同。在像您这样的情况下，以这种方式使用箭头功能非常有用，可以从嵌套函数（与下面显示的内容相比）直接便捷地访问调用上下文。

或者，如果目标浏览器不支持箭头功能，则可以通过以下方法解决此问题：

$(".color").click( function () {

    var colorNext = $(this).next();        
    colorNext.addClass("class");

    setTimeout(function () { colorNext.removeClass("class"); }, 800); 
})

800ms后删除下一个div的类

1 个答案: