javascript - 为什么我的 jQuery 扩展的函数行为“静态”？

Question

我制作了一个自定义 jQuery 扩展来处理上传文件。

我的剥离版本：http: //jsfiddle.net/6huV6/

我的完整版：http: //jsfiddle.net/LQrJm/

我的问题是它buildBondye被调用了 2 次，但我的扩展添加了 2 x 2 滴管和按钮..

我该如何解决？

Answer 1

您得到四个，因为对于匹配元素集中的每个元素，您正在调用该buildBondye函数，而该函数又调用addButtonandaddDropper函数。这些函数使用$this，它是匹配元素的整个集合（所以它们都是），而不仅仅是用于.each().

您可以通过将单个元素的引用传递给这两个函数来解决此问题，并改用它：

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。