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 回答