Question

我有$.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，有没有办法使用“父”$（这个）？在这种情况下，这个悬停函数中的“#example”？

Answer 1

您可能希望将this的原始引用作为closure写入内部函数，如下所示：

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

Answer 2

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

您的问题的常见解决方案是使用'that'变量：

$.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.
  });

}

我相信这最初是proposed by Douglas Crockford，但我不确定其来源。该链接将提供技术细节，但对于“私人数据成员”而言，这种用法非常重要。

Best-Practice的另一个非常重要的一点......

我真的建议使用模式，但不要调用变量'that'。

原因如下：

知道并不是那么重要 - ＆gt;变量来自哪里，但是 - ＆gt;这是什么。在实践中，可以来自包装范围的多个代码行远离当前行。从可维护性的角度来看，尝试找出“那个”是浪费时间，如果不知道“这个”是什么，那就更加令人沮丧。相反，我们应该把它称之为现在，并让范围成为现实。

例如，

var button_container; //instead of that.

此外，其他人正在使用添加美元符号的命名惯例。

var $name;

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

希望有所帮助。

Answer 3

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

$.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!
  });
}

Answer 4

将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()
  });
}

Answer 5

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

然而，这导致大多数人不了解JavaScript范围以及闭包是什么/做什么。

有关JavaScript闭包，范围等的深入阅读，请参阅此博文（不是我的）：http://jibbering.com/faq/notes/closures/

Answer 6

你需要以某种方式存储它E.G

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

Answer 7

$.fn.sample = function() {
  var $n = $(this);
  console.log($n.width()); 
  $('#other').hover(function(){
    // use $n
  });
}

Answer 8

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

在jquery的范围内使用父“$（this）”

8 个答案: