jquery - jquery 范围内的父级 "$(this)"

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

Answer 1

答案是肯定的，但不是与 parent 一起。

您的问题的常见解决方案是使用“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 ，但我不确定起源。该链接将提供技术细节，但事实证明其用法对于“私有(private)数据成员”非常重要。

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

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

原因如下:

知道变量从哪里来并不那么重要，重要的是知道它是什么。实际上， a 可能来自远离当前相关行的多行代码的包装范围。从可维护性的角度来看，试图弄清楚“那”是什么是浪费时间，如果甚至不知道“这”是什么，那就更令人沮丧了。相反，我们应该按其本来的样子调用它，并让其范围保持原来的样子。

例如，

var button_container; //instead of that.

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

var $name;

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

希望有帮助。