在 jQuery 插件中为每个元素设置计数器

Question

当您在 jQuery 插件中设置计数器时，它将针对插件的每个实例进行设置。例如

$.myPlugin(".one");
$.myPlugin(".two");

$.myPlugin = function (el) {
    var counter = 0;
    $(el).click(function () {
        counter++;
        console.log(counter);
    });
};

将启动两个计数器。 (Try it here) 但是，我希望每个元素而不是每个实例都有一个计数器。因此，在 fiddle 中，我总共需要三个计数器。（请注意，元素的长度不是预先设置的，因此它必须是动态的。）我考虑过为计数器的名称添加一个唯一的值，但我不完全确定什么值足够具体以至于可以从不重复。

也许一个for循环和一个整数来区分，例如counter-1、counter-2、counter-3？但是我如何遍历插件的实例呢？换句话说，我如何确保在总共三个元素上调用插件两次 fiddle 时，我只得到三个 unique 计数器？

Answer 1

使用自定义 data- 属性设置计数器

$('button').each(function(){
    $(this).attr('data-counter', 0);
    $(this).click(function () {
        var counter = parseInt($(this).attr('data-counter'));
        counter++;
        console.log(counter);
        $(this).attr('data-counter', counter);
    });
});

DEMO

Answer 2

您可以使用.data()自定义与您的元素关联

Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

代码

$.myPlugin = function (el) {
    $(el).click(function () {
        var counter = $(this).data('counter') || 1;
        console.log(counter);
        $(this).data('counter', ++counter);
    });
};

DEMO

我个人喜欢这样

$.fn.myPlugin = function () {
    this.click(function () {
        var counter = $(this).data('counter') || 1;
        console.log(counter);
        $(this).data('counter', ++counter)

    });
};

$(".one").myPlugin();
$(".two").myPlugin();

DEMO

Answer 3

使用.data()
试试这个例子：

$.myPlugin(".one");
$.myPlugin(".two");

$.myPlugin = function (el) {
    $(el).on('click', function () { // using .on instead of .click to handle dynamicaly added elements
        var counter = parseInt($(this).data('counter')); // using .data() function of jquery to get value from element, it uses data-counter attribute
        counter++; // iterating
        $(this).data('counter', counter); // setting back counter with iterated value
    });
};

在 jQuery 插件中为每个元素设置计数器

Set counter per element in jQuery plugin

jquery

loops

jquery-plugins

counter