javascript - 使用不同的参数将同一函数绑定(bind)到窗口调整大小事件

我正在制作一个简单的JS插件，以垂直调整对象的大小。直到调整大小事件-在所有绑定的初始$flexParent函数中$flexParent似乎都被设置为最后一个.each()时，它才能正常工作。因此，对于传递给插件的三个'flexParents'，只有最后一个作用在resize事件上。仅3次。显然，我在这里对绑定有误解，但是请您多加澄清！

（函数（$）{
    $ .fn.flexHeight =函数（选项）{

        if（！options）{options = {};}
        变量设置= $ .extend（{
            框：假
        }，选项）；

        函数main（flexParent）{
            var $ flexParent = flexParent;
            如果（settings.boxes）{
                $ children = $ flexParent.find（settings.boxes）;
            }其他{
                $ 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）;
            }）;
        }

        返回this.each（function（）{
            $ flexParent = $（this）;
            main（$ flexParent）;
            $（window）.resize（function（）{
                main（$ flexParent）;
            }）;
        }）;
    }
}（jQuery））;

最佳答案

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

将您的代码更改为：

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

这使得$flexParent对于传递给每个函数的函数来说是局部的，因此每个元素将有一个变量。