Question

我有一个div，里面有一个div，它会在点击时删除外部div。实现这一目标的jQuery是

275 $(document).on('click','.rightMenuDelete', function(event) {
276   $(this).parents('.cell').  
277   fadeOut(300, function()  {
278     $(this).remove();});
279  });

在276，this关键字是我们点击的内部div。到277，包装集具有我们想要删除的外部div。但是我想在删除它之前淡出外部div，所以277应用fadeOut然后回调删除外部div。让我感到惊讶的是278的作品。 278处的this关键字是我们想要的外部div，而不再是我们最初点击的内部div。当控件向下移动jQuery链时，任何人都可以对这个关键字如何变化有所了解吗？

谢谢

Answer 1

执行this时，parents('.cell')指向的元素在第276行上发生了变化。它不再指向inner div，而是指向具有类cell的父级列表。

之后执行fadeOut，循环遍历父项集合。在循环内部，this指的是循环的当前父级。

Answer 2

只需保留对旧版this的引用，因为您在.fadeOut

上呼叫.parents('.cell')

Answer 3

Javascript中的

this根据它所在的函数确定范围。创建一个传递给回调的变量并在其上调用.remove。

$(document).on('click','.rightMenuDelete', function(event) {
    var par = $(this).parents('.cell');
    par.fadeout(300, function() {$(par).remove();});
  });

应该工作。

Answer 4

要保留原始this，您可以将其保存在变量中：

$(document).on('click','.rightMenuDelete', function(event) {
   var that = this;
   $(this).parents('.cell').  
       fadeOut(300, function()  {
           $(that).remove();});
});

上述技术是必需的，因为this会更改fadeOut中的上下文，如其他响应所示。

Answer 5

感谢大家。你们很棒，很快。将父项分配给变量然后在fadeOut / remove行中使用该变量显然是更好的编码，我会这样做。不过，我的主要问题是，jQuery中发生的事情是将this关键字的值从jQuery链中的一个函数更改为下一个函数。在纯JavaScript中，函数内部的this关键字是全局对象，如窗口或文档，显然这里发生了更多的事情。

我现在明白了，传递给回调函数的是传递给它的包装集的当前成员，此时的包装集是父集，而不是原始的clickee。再次感谢。

jQuery“this”在链中发生变化

5 个答案: