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。因此，在第一行两次单击并单击“显示”按钮后，我得到两条消息“Clicks 1 = 2”和“Clicks 2 = 2”，但它应该是“Clicks 1 = 2”和“Clicks 2 = 0”。看起来变量num是全局的。

我做错了什么？

Answer 1

您应该使用.data()将数据存储在相关DOM元素上。像这样：

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

Jquery插件私有和公共属性

1 个答案: