setTimeout() 不适用于 jQuery(this)

Question

我这里有这段脚本，我想向上滑动我的 ul 元素，然后在向上滑动执行后，我想删除 "open" class 出于 CSS 个原因。我做错了什么？

jQuery(this).parent().children("ul").slideUp(500);
setTimeout(function(){
  var elementToRemove = jQuery(this).parent();
  elementToRemove.removeClass("open");
}, 500);

Answer 1

this 在你的回调函数中引用了全局对象而不是事件目标。

两种解决方案：

使用箭头函数（保留 this 上下文）：

jQuery(this).parent().children("ul").slideUp(500);
setTimeout(() => {
  var elementToRemove = jQuery(this).parent();
  elementToRemove.removeClass("open");
}, 500);

或者保存一个link到this对象：

jQuery(this).parent().children("ul").slideUp(500);
let that = this;
setTimeout(function(){
  var elementToRemove = jQuery(that).parent();
  elementToRemove.removeClass("open");
}, 500);

Answer 2

解决方案 1

使用bind将上下文传递给函数

jQuery(this).parent().children("ul").slideUp(500);

var func = function(){
  var elementToRemove = jQuery(this).parent();
  elementToRemove.removeClass("open");
}
setTimeout(func.bind(this),500);

解决方案 2

jQuery(this).parent().children("ul").slideUp(500);
var self = this;
setTimeout(function(){
  var elementToRemove = jQuery(self).parent();
  elementToRemove.removeClass("open");
}, 500);

Answer 3

jQuery 动画允许在文档中调用一个名为 complete 的附加可选参数（回调），该参数将在动画完成后执行。你可以这样使用它：

jQuery(this).parent()
            .children("ul")
            .slideUp(500, function(){
                var elementToRemove = jQuery(this).parent();
                elementToRemove.removeClass("open");
            });

setTimeout() 不适用于 jQuery(this)

setTimeout() doesn't work with jQuery(this)

javascript

jquery

settimeout

removeclass