Question

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

$.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的上下文绑定到您的函数才能使调整大小正常工作：

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

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

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

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

要阅读的一些概念：