如何为 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);
        }
    });
};

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

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

Fiddle