Question

我正在尝试构建一个小插件。我希望能够在同一页面上的多个元素上使用此插件，但具有不同的选项。

当我点击其中一个元素时，让我们称它为元素A，我希望插件对该元素进行处理（A）。但就像现在一样，无论我点击哪个元素，它都会对元素B产生影响。

例如：

$(".elementA").myplugin({"name": "Element A"});    
$(".elementB").myplugin({"name": "Element B"});

(function($) {
$.fn.myplugin = function(options) {
    return new Myplugin (this, options);
}

var Myplugin = function (element, options) {
    this.element = $(element);
    this.settings = $.extend({
        "name": "default"
    });

    var self = this;
    this.element.on("click", function(e) {
        self.doStuff(e);
    });
};

Myplugin.prototype = {
    doStuff: function (e) {
        console.log(this.settings.name) // returns element B, no matter which element I click on.
    }
};

})(jQuery);

似乎当我将插件添加到元素B时，doStuff函数中的“this”指向插件的每个实例中的元素B.我在这里不理解的是什么？

Answer 1

好吧，我明白了。

似乎我在self = this之前忘记了“var”，而是在原始代码中声明了一个全局变量（我确实在下面正确地写了它）。

多个JQuery插件实例

1 个答案: