Question

我创建了一个非常有效的jQuery插件，直到我开始在页面上使用多个对象进行测试。问题是当我从插件中的函数内部访问时，传递给每个新插件对象的options对象并不总是与该特定对象相关联的对象。我觉得我遗漏了一些非常简单的东西，所以代码可能会让事情变得更加清晰。

用于创建插件的方法

$.fn.myPlugin = function(options) {
    return this.each(function() {
        var opts = $.extend({}, $.myPlugin.defaults, options);
        new $.myPlugin($(this), opts);
    });
}

访问选项对象的函数

$.myPlugin = function($textbox, options) {
    function doSomething($textbox) {
        alert(options.someProperty);
    }
}

无论我在创建插件时是什么options.someProperty。在插件中调用doSomething将始终返回我创建的第一个插件对象中第一个选项对象的someProperty，例如：

$textbox.focus(function() { doSomething($textbox); } );

即使具有不同选项对象的不同对象被聚焦，这也将始终返回相同的someProperty。

我希望我已经说清楚了。如果您需要更多详细信息，请与我们联系。

Answer 1

您为插件提供了对所有元素的相同options对象的引用。

尝试以下方法：

return this.each(function() {
    new $.myPlugin($(this), $.extend({ }, options));
});

这将每次将options对象的成员复制到新对象。如果您的options对象中嵌套了其他对象，则可能需要深层副本，如下所示：$.extend(true, { }, options)

编辑：您需要在options方法中扩展each对象。否则，您仍将拥有所有元素的相同对象。

Answer 2

尝试更改

function doSomething($textbox) {

到

var doSomething = function($textbox) {

确保您创建使用单独closures的单独doSomething方法。（第一个版本将在第一次调用时创建一个函数，并重用该函数及其闭包）

jQuery插件 - 将选项对象分开

2 个答案: