3

我有一个$.fn.sample = function()被调用者,假设$('#example').sample();在函数内部我可以在它的范围内使用“this”:

$.fn.sample = function(){
   console.log($(this).width()); 
} //In this case, it would log the width of #example 

但是假设我将悬停函数调用到另一个元素中,就像这样

$.fn.sample = function(){ 
  console.log($(this).width()); 
  $('#other').hover(function(){
    //Here, $(this) will refer to #other
  });
}

那么,在悬停函数“$(this)”内部将引用#other,有没有办法使用“父”$(this)?在这种情况下,这个悬停函数中的“#example”?

4

8 回答 8

3

您可能希望将原始引用编写为内部函数this闭包,如下所示:

$.fn.sample = function(){ 
  var $parent = $(this);
  console.log($parent.width()); 
  $('#other').hover(function(){
    //Here, $(this) will refer to #other
    $parent.....
  });
}
于 2012-08-02T22:25:14.177 回答
3

答案是肯定的,但不是父母。

您的问题的一个常见解决方案是使用“那个”变量:

$.fn.sample = function(){ 
  console.log($(this).width());

  var that = $(this);             // <-- good pattern for traversing scope.
       
  $('#other').hover(function(){
    
    //Here, that will refer to the parent.
  });

}

我相信这最初是由 Douglas Crockford 提出的,但我不确定其来源。该链接将提供技术细节,但事实证明,这种用法对于“私人数据成员”非常重要。

关于最佳实践的另一个非常重要的观点......

我真的建议使用该模式,但不要调用变量“that”。

原因如下:

知道 -> 变量来自哪里并不重要,但 -> 它是什么。在实践中,a 可能来自一个包装范围,许多行代码远离当前有问题的行。从可维护性的角度来看,尝试弄清楚“那个”是什么是浪费时间,如果甚至不知道“这个”是什么,那就更令人沮丧了。相反,我们应该把它称为它的本来面目,让作用域成为它的本来面目。

例如,

var button_container; //instead of that.

此外,其他人正在使用添加美元符号的命名约定。

var $name;

这没关系,但可能会令人困惑。值得一提的是,它表示该对象是一个 jQuery 对象。

希望有帮助。

于 2012-08-02T22:29:36.970 回答
2

最简单的方法是保存参考:

$.fn.sample = function(){ 
  console.log($(this).width());
  var $that = $(this)
  $('#other').hover(function(){
    // Here, $(this) will refer to #other
    // but $that will still be the same as above!
  });
}
于 2012-08-02T22:24:54.253 回答
2

缓存this$this

$.fn.sample = function(){
  var $this = $(this);
  console.log($this.width()); 
  $('#other').hover(function(){
    // Here, $(this) will refer to #other
    // and $this will refer to the selector that called sample()
  });
}
于 2012-08-02T22:25:23.760 回答
2

以前使用命名变量的解决方案是解决您的特定问题的方法。所以选择其中之一。ClintNash 的回答特别有见地。

然而,这导致大多数人不了解 JavaScript 作用域以及闭包是/做什么。

有关 JavaScript 闭包、范围等的深入阅读,请参阅此博客文章(不是我的):http: //jibbering.com/faq/notes/closures/

于 2012-08-03T01:32:30.523 回答
1

你需要以某种方式存储它 EG

$.fn.sample = function(){ 
  $parent = $(this);
  console.log($(this).width()); 
  $('#other').hover(function(){
    //Here, $(this) will refer to #other
    // use $parent in here. 
  });
}
于 2012-08-02T22:26:01.357 回答
0
$.fn.sample = function() {
  var $n = $(this);
  console.log($n.width()); 
  $('#other').hover(function(){
    // use $n
  });
}
于 2012-08-02T22:25:08.043 回答
0

我会选择此处给出的任何其他选项,但作为替代方案,您可以使用函数的apply方法将其设置为您想要的。

于 2012-08-02T22:35:28.040 回答