如何为jQuery插件设置一个私有变量？

Question

我想创建一个简单的插件，它与元素的文本一起作为默认值使用，或者您可以在调用插件时设置此值。

但是，如果我不设置该值，并调用多个元素的插件，则默认值会相乘。

(function($) { 
    $.fn.reText = function(options) { 
     var settings = $.extend({ 
      label : $(this).text() 
     }, options); 
     return this.each(function() { 
      $(this).text(settings.label); 
     }); 
    }; 
})(jQuery); 

电话：

$(function() { 
    $('div').reText(); 
}); 

结果：

<div>text 1</div> 
<div>text 2</div> 

jsFiddle

我知道，问题是settings的范围，但我不知道如何解决问题...

Answer 1

移动设置变量声明中的每个功能中，这样它会为每个元素/ div不同。

示例代码将是如下：

return this.each(function() { 
    var settings = $.extend({ 
     label : $(this).text() 
    }, options); 

    $(this).text(settings.label); 
}); 

Updated Fiddle

Answer 2

它是每个循环中，所以，在给定的每个元素都有自己的缺省值

(function ($) { 
    $.fn.reText = function (options) { 
     return this.each(function() { 
      var settings = $.extend({ 
       label: $(this).text() 
      }, options); 
      $(this).text(settings.label); 
     }); 
    }; 
})(jQuery); 

演示：Fiddle

Answer 3

在效应初探你如何给其他方法访问您的私有变量进一步查询，你可以简单地设置一个“自我”在迭代开始时使用上下文，然后引用它。在迭代中声明的所有其他方法仍然可以引用self.settings，尽管它们本身将在新的函数上下文中。

$.fn.reText = function(options) { 
    return this.each(function() { 
     var self = this; 

     self.settings = $.extend({ 
      label : $(this).text() 
     }, options); 

     $(this).text(self.settings.label); 

     self.DoSomething = function() { 
      console.log(self.settings.label); 
     } 
    }); 
}; 

或者，如果你是你的迭代循环的范围之内，你可以给你的Dependance jQuery的使用jQuery .data方法设置你的实例数据。

// Store 
$(this).data("reText", self.settings); 
... 
console.log($(this).data("reText")) 

Fiddle