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

这是我的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);

我可以这样调用方法increase：

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

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

但是，由于initilized、element和counter变量，我无法在一个页面上的多个元素上初始化插件。

---

我如何修改这段代码，以便在一个页面上多次使用它，而不改变初始化和调用方法的方式？

我自己也做同样的事情，一旦你知道怎么做，这就非常简单了

以一个简单的插件为例

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

要修改它以在多个实例上工作，只需在调用它时解析

此

$.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);

---

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

以一个简单的插件为例

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

要修改它以在多个实例上工作，只需在调用它时解析

此

$.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插件来说，这是一个良好的开端，并且有适合您的框架。对于编写jQuery插件来说，这是一个良好的开端，并且有适合您的框架。