0

我有一个 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。任何人都可以了解 this 关键字如何随着控件沿 jQuery 链向下移动而改变吗?

谢谢

4

5 回答 5

3

this执行时,第 276 行本身的变化所指向的元素parents('.cell')。它不再指向innerdiv,而是指向具有 class 的父母列表cell

之后您执行在父集合上循环的fadeOut。在循环内部,this指的是当前被循环的父级。

于 2013-05-03T17:22:49.597 回答
1

只需保留对您的旧的参考this,因为您在这里.fadeOut呼吁.parents('.cell')

于 2013-05-03T17:20:26.840 回答
0

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

不过,我现在明白了,传递给回调函数的 this 是传递给它的包装集的当前成员,此时包装集是父级,而不是原始点击者。再次感谢。

于 2013-05-03T18:03:45.597 回答
0

this在 Javascript 中的作用域基于它所在的函数。创建一个传递给回调并调用.remove它的变量。

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

应该管用。

于 2013-05-03T17:21:38.810 回答
0

要保留原始文件this,您可以将其保存在变量中:

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

上述技术是必需的,因为this如其他响应所指出的那样,会更改淡出内部的上下文。

于 2013-05-03T17:28:04.357 回答