0

オブジェクトを垂直方向にサイズ変更するための単純な JS プラグインを作成しています。サイズ変更イベントまでは正常に機能します-すべてのバインドの初期関数$flexParentの最後として設定されているようです。そのため、3 つの「flexParents」がプラグインに渡された場合、最後の 1 つだけがサイズ変更イベントで処理されます。わずか3回。明らかに、ここでバインディングを誤解していますが、明確にしていただければ幸いです。$flexParent.each()

(関数($){
    $.fn.flexHeight = 関数 (オプション) {

        if (!options){options = {};}
        変数設定 = $.extend({
            ボックス: false
        }、オプション);

        関数 main(flexParent) {
            var $flexParent = flexParent;
            if (settings.boxes) {
                $children = $flexParent.find(settings.boxes);
            } そうしないと {
                $children = $flexParent.children
            }
            var maxHeight = 0;

            $children.each(関数() {
                $(this).height('auto');
            });

            $children.each(関数() {
                maxHeight = maxHeight > $(this).outerHeight(false) ? maxHeight : $(this).outerHeight(false);
            });

            $children.each(関数() {
                $(this).height(maxHeight);
            });
        }

        return this.each(function() {
            $flexParent = $(これ);
            メイン ($flexParent);
            $(window).resize(関数() {
                メイン ($flexParent);
            });
        });
    }   
}(jQuery));
4

1 に答える 1

2

$flexParentグローバル変数として宣言されているため、関数呼び出し間で共有されます。ウィンドウのサイズ変更コールバックが呼び出されるまでに、グローバル $flexParent 変数は最後の要素を指します。

コードを次のように変更します。

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

これにより、$flexParentそれぞれに渡される関数のローカルが作成されるため、要素ごとに 1 つの変数が存在します。

于 2013-10-18T14:42:35.560 に答える