jquery插件this.each功能

Question

我试着写一个小jquery插件。在过去，我主要使用JavaScript。 我不明白th​​is.each函数。首先我为$ .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); 
    }); 
} 

我那么如何使用this.each在jQuery插件的功能？

Answer 1

您必须绑定什么this是你的功能方面的调整大小正常工作：

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