javascript - jquery 插件 this.each 函数中

Question

我尝试编写一个小的 jquery 插件。过去我主要使用javascript。我不明白 this.each 函数。首先，我为 $.fn 编写一个新方法。在这个方法中我想获得所有元素的offset().top。

$.fn.jquerynParalFade = function() {
  this.each(function() {
    console.log($(this).offset().top);
  });
} 

这对我来说效果很好。但是，如果我调整屏幕大小(例如在转动设备时)，我想获得所有元素的新位置。为此，我添加了一个可以在调整大小时运行的函数。

$(window).resize(function() {
  resize();
});

现在我遇到的问题是我无法在函数内部使用 this.each() 。相反，我使用 $(this).each。但如果我这样做，控制台会告诉我 offset() 不是 $(this) 的函数。

代码如下所示:

function resize(){
  $(this).each(function(index) {
    console.log($(this).offset().top);
  });
}

那么我如何在 jquery 插件的函数中使用 this.each 呢？

Answer 1

您必须将 this 的上下文绑定(bind)到您的函数，以便调整大小正常工作:

var myResize = resize.bind(this)
myResize() // now it should work

另一种方法是传递上下文:

function resize (context) {
  context.each( ... )
}

$(window).resize(function () { resize(this) })

一些需要阅读的概念:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this