javascript - jQuery 拡張機能の関数が「静的」に動作するのはなぜですか?

Question

アップロード用のファイルを処理するカスタム jQuery 拡張機能を作成しました。

私の削除されたバージョン: http://jsfiddle.net/6huV6/

私のフルバージョン: http://jsfiddle.net/LQrJm/

私の問題はbuildBondye2回呼び出されることですが、私の拡張機能には2 x 2のドロッパーとボタンが追加されています..

これを修正するにはどうすればよいですか?

Answer 1

buildBondye一致した要素のセット内の各要素に対して関数を呼び出しているため、4 つにaddButtonなりaddDropperます。これらの関数は$this、 のその繰り返しの要素だけでなく、一致した要素のセット全体 (つまり両方) である を使用します.each()。

これらの 2 つの関数に単一の要素への参照を渡し、代わりにそれを使用することで、これを修正できます。

var buildBondye = function () {
    // inside buildBondye this refers to the specific element for the iteration of .each()
    // different to the this inside the $.fn.bondye function
    addButton(this);
    addDropper(this);
}

var addDropper = function (element) {
    $dropper = $('<input type="text" readonly />');
    $dropper.val('drop here');
    $(element).after($dropper);
}

var addButton = function (element) {
    $button = $('<input type="button" />');
    $button.val('browse');
    $button.bind('click', function () {
        $(element).trigger('click');
    });
    $(element).after($button);
}

この更新された jsFiddleを見てください。