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

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

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

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

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

Answer 1

您可以使用.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 2

使用自定义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 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 }); };