javascript - JQuery 插件的多个实例

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”，而是在原始代码中声明了一个全局变量(尽管我下意识地在上面写了它)。