如何修改jquery插件中的变量？

Question

我在插件之外声明了变量，所以我可以稍后修改它们：

$node.ondrag({start:function(){ console.log(this,"start drag"); }});
$node.change({start:function(){ console.log(this,"other function"); }});

但显然如果我将插件附加到另一个元素，则该函数将被覆盖。

(function($) {
    var startfn, dragfn, endfn;
    $.fn.ondrag = function(opt){
        var obj = this;
        startfn = opt['start']||null;
        this.on("mousedown",function(){ if (startfn) obj.startfn(); });
        return this;
    };
    $.fn.change = function(opt){
        startfn = opt['start'];
        return this;
    };
})(jQuery);

那么如何为每个使用该插件的元素设置不同的变量呢？

Answer 1

您可以使用jQuery的.data API将其存储在每个元素上，而不是将信息存储在变量中。

例如

var startfn = opt['start'] || null;
this.data('myplugin.startfn', startfn);

如果你正在做更多高级的东西，我建议你看一下jQuery UI的$.widget工厂方法 。 它应该使创建有状态插件更容易。 它还使用引擎盖下的$.data 。

此外，如注释中所述，您不应覆盖现有的jQuery方法。 看起来您的.change函数是插件中的某种辅助函数。 查看有关插件的jQuery文档 ，在“将辅助功能的公共访问提供为适用”下 。 基本上，你会.change插件函数的属性：

$.fn.ondrag.change = function(opt){
    // ...
};