Question

当你在jQuery插件中设置一个计数器时，它将根据插件的每个实例进行设置。例如

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

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

将启动两个计数器。（Try it here）但是，我希望每个元素都有一个计数器，而不是每个实例。因此，在小提琴中，我总共需要三个计数器。（请注意，元素的长度不是预先设置的，所以它必须是动态的。）我想为计数器的名称添加一个唯一值，但我不完全确定什么值是特定的，以便永远可以是任何重复。

可能是for循环和整数来区分，例如counter-1，counter-2，counter-3？但是我如何循环插件的实例？换句话说，我如何确保在总共调用三个元素的小提琴中两次调用插件时，我只能获得三个唯一计数器？

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()与您的elemet相关联的自定义

存储与匹配元素关联的任意数据，或者在指定数据存储中返回匹配元素集中第一个元素的值。

代码的

$.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插件

3 个答案: