Question

我正在制作一个简单的JS插件来垂直调整对象的大小。它适用于调整大小事件 - 其中$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));

Answer 1

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

将您的代码更改为：

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

这使得函数的$flexParent本地传递给每个元素，因此每个元素都有一个变量。

使用不同的参数将相同的函数绑定到window resize事件

1 个答案: