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

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

3 个答案: