Javascript 将同一函数绑定到具有不同参数的窗口大小调整事件

我正在制作一个简单的JS插件来垂直调整对象的大小。它可以正常工作，直到resize事件-其中

$flexParent

似乎被设置为初始

中最后一个
$flexParent
。所有绑定的each（）

函数。因此，对于传递给插件的三个“flexParents”，只有最后一个会在resize事件上执行操作；只有3次。很明显，我对这里的约束有误解，但如果能澄清一下，我将不胜感激

(function($){ $.fn.flexHeight = function(options) { if (!options){options = {};} var settings = $.extend({ boxes: false }, options); function main(flexParent) { var $flexParent = flexParent; if (settings.boxes) { $children = $flexParent.find(settings.boxes); } else { $children = $flexParent.children } var maxHeight = 0; $children.each(function() { $(this).height('auto'); }); $children.each(function() { maxHeight = maxHeight > $(this).outerHeight(false) ? maxHeight : $(this).outerHeight(false); }); $children.each(function() { $(this).height(maxHeight); }); } return this.each(function() { $flexParent = $(this); main($flexParent); $(window).resize(function() { main($flexParent); }); }); } }(jQuery)); （函数（$）{ $.fn.flexHeight=功能（选项）{ 如果（！options）{options={}；} 变量设置=$.extend({ 框：假 }，选项）； 主功能（flexParent）{ var$flexParent=flexParent； if（settings.box）{ $children=$flexParent.find（settings.box）； }否则{ $children=$flexParent.children } var maxHeight=0； $children.each（函数（）{ $（this.height（'auto'）； }); $children.each（函数（）{ maxHeight=maxHeight>$（此）.outerHeight（假）？maxHeight:$（此）.outerHeight（假）； }); $children.each（函数（）{ $（此）.height（最大高度）； }); } 返回此值。每个（函数（）{ $flexParent=$（此项）； 主要（母公司）； $（窗口）。调整大小（函数（）{ 主要（母公司）； }); }); } }（jQuery））；

---

$flexParent

被声明为全局变量，因此它在函数调用之间共享。调用窗口大小回调时，全局$flexParent变量将指向最后一个元素

将代码更改为：

  return this.each(function() {
        var $flexParent = $(this); // <-- added var here
        main($flexParent);
        $(window).resize(function() {
            main($flexParent);
        });
    });

返回此.each（函数（）{
变量$flexParent=$（此）//