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（立即调用函数表达式）。在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插件。

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

2 个答案: