Question

这是我的jQuery插件的虚构版本，但结构完全相同：

(function ($)
{
    var initialized = false;
    var element;
    var counter = 0;

    $.fn.myPlugin= function(action)
    {
        if (action === "increase")
        {
            increase(arguments[1]);
        }
        else if (!initialized)
        {
            settings = $.extend({
                ...
            }, action);

            initialized = true;
            element = $(this);

            return this;
        }
        else
        {
            console.error("Unknown function call.");
            return;
        }
    };

    var increase = function(amount)
    {
        counter += amount;
        element.text(counter);
    };
}(jQuery));

使用此代码，我可以像这样初始化我的插件：

$("#element").myPlugin(options);

我可以这样调用方法增加：

$("#element").myPlugin("increase", 5);

但是，我无法在一个页面上的多个元素上初始化我的插件，因为变量已启动，元素和计数器。如何修改此代码，以便我可以在一个页面上多次使用它而不改变初始化和调用方法的方式？

Answer 1

我自己做同样的事情，一旦你知道怎么做就很简单。

以一个简单的插件示例为例......

$.fn.myPlugin = function() {
    // plugin global vars go here
    // do plugin stuff here
}

要修改它以适用于多个实例，只需在调用它时解析this ...

$.fn.myPlugin = function() {
    $(this).each(function() {
        // plugin global vars go here
        // do plugin stuff here
    });
}

这样，当您将插件分配给单个实例或元素集合时，它将起作用。

然后，要调用单个元素的方法，您只需指定正确的元素......

$("#element1").doMethod(1, 2, 3);
$("#element2").doMethod(4, 5, 6);

转换jQuery插件以支持多个实例

1 个答案: