如何让每个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

您可以创建类似

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

演示：Fiddle

Answer 2

随着IIFE（立即调用Functi在表达式上）。在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插件全靠它。