javascript - 如何让每个jquery插件实例都有自己的变量？

Question

我已经编写了这个基本插件，但我想让每个实例都有自己的变量。

如果我运行以下命令，则计数器为两者共享。

我怎样才能让每个人都有自己的变量？

html

<div class=one>one</div>
<br>
<div class=two>two</div>

js

$.fn.ishare = function(){

    $counter = 0;
    $shell = $(this);

    $shell.on('click',function(){
        console.log($counter++);
    }); 

};


$('.one').ishare('green');

$('.two').ishare('yellow');

Answer 1

使用 IIFE（立即调用函数表达式）。在 jQuery 插件中是一个非常好的实践。它是这样的：

(function( $ ) {
$.fn.ishare = function() {
var $counter = 0;
$shell = $(this);

$shell.on('click',function(){
    console.log($counter++);
}); 
};
})( jQuery );

http://jsfiddle.net/aT3wd/

更多信息在这里：https ://github.com/jquery-boilerplate/jquery-boilerplate/wiki/How-did-we-get-here%3F

多亏了它，我制作了我的第一个 GitHub jQuery 插件。

Answer 2

您可以创建类似的东西

$.fn.ishare = function(){
    return this.each(function(){
        var $counter = 0;
        $(this).on('click',function(){
            console.log($counter++);
        });
    })
};

演示：小提琴