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

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

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

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

呼叫：

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

结果：

 
text 1
 
text 2 

的jsfiddle

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

Answer 1

在每个函数内部移动设置变量声明，以便每个元素/ div都不同。

示例代码如下：

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

更新小提琴

Answer 2

它必须位于每个循环内部，以便给定集合中的每个元素都将获得其自己的默认值

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

演示： 小提琴

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); } }); }; 

或者，如果您不在迭代循环的范围内，则可以使用Jquery .data方法设置实例数据，前提是您依赖于jquery。

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

小提琴