jquery - Jquery 插件私有和公共属性

Question

我正在尝试编写我的第一个简单的 jquery 插件，但我不知道如何在 jquery 对象中创建私有变量。这是代码

var first;
var second;
$(document).ready(function(){
  first = $("#clicker1").demSelector();
  second = $("#clicker2").demSelector();
});

 $(".totalClicks").click(function(){
    alert("Clicks 1 = "+first.number());
    alert("Clicks 2 = "+second.number());
});


(function($){
  var num = 0;
  $.fn.demSelector = function() {
    return this.each(function(){
      init(this);
    });
  };

  $.fn.number = function(){
    return num;
  };

  function init(control){
      $(control).on('click','.num-of-clicks', function(){
        num = parseInt($(this).html(),0) + 1;
        $(this).html(num);
      });
  }
})(jQuery);

和演示项目http://jsbin.com/afEduKI/9/edit

当您单击“0”时，它会递增并更改变量 num。但它改变了第一个和第二个对象的 num 。因此，在第一行单击两次并单击“显示”按钮后，我收到两条消息“单击 1 = 2”和“单击 2 = 2”，但它应该是“单击 1 = 2”和“单击 2 = 0”。看起来变量 num 是全局的。

我究竟做错了什么？

Answer 1

你应该做什么将数据存储在相关的 DOM 元素上，使用.data(). 像这样的东西：

var first;
var second;
$(document).ready(function(){
  first = $("#clicker1").data('count',0);
  second = $("#clicker2").data('count',0);    
});

$(document).on('click','.clicker', function(){
    $(this).data('count',$(this).data('count')+1);
    $(this).find('.num-of-clicks').html($(this).data('count'));
});

http://jsbin.com/afEduKI/11/edit