Question

我开始使用jQuery插件，为新手问题道歉。我的目标是让一个插件实例化两次，其中每个实例都有自己的变量值。但是，它们似乎共享命名空间。

例如，给定以下插件：

(function ( $ ) {

    var x = false;

    $.fn.test = function() {

        alert(x);

        if ( !x )
           x = true;

        return this;

    };

}( jQuery ));

从以下div调用：

$( "div1" ).test();
$( "div2" ).test();

警报首先显示false，然后显示true，此时目标是必须设置变量集，其中警报将显示错误两次。

这可能吗？

Answer 1

你的问题有些混乱。你的插件是一个简单的功能。您不通过调用来“实例化”函数。所以你也不要“实例化”你的插件。

您可以在函数中实例化事物，并将它们保存在某个地方。

由于外部作用域只运行一次，因此在原始解决方案中，您只能获得一个变量x的实例。

如果在函数内部创建它，每次调用它时都会创建一个新实例。

我假设你想为你调用这个插件的每个元素创建一个实例。一个好的解决方案是将数据附加到启动插件的DOM元素，例如：

(function ( $ ) {
    $.fn.test = function() {
        var vars = this.data('testPlugin');
        if (!vars) {
            vars = {
                x: false,
                something: 'else'
            };
            this.data('testPlugin', vars);
        }

        alert(vars.x);
        vars.x = !vars.x;

        return this;
    };
}( jQuery ));

尝试this fiddle。

Answer 2

你应该把

var x = false;

在$.fn.test function内，否则x变量对于所有test()函数都相同，并在首次调用后设置为true。

您可以阅读有关javascript变量范围的更多here。

Answer 3

实际上，这比之前的答案容易得多。插件中this的上下文是您根据所提供的选择器接收的DOM元素的jQuery对象。要获得唯一性，只需迭代每个元素，如下所示：

(function($) {
  $.fn.test = function() {
    return this.each(function() {
      var x = false;

      alert(x);

      if (!x) {
        x = true;
      } 
    });
  }
}(jQuery));

$("div1").test();  //false
$("div2").test();  // false

这是一个确认的JSFiddle：http://jsfiddle.net/Z6j7f/

jQuery插件实例变量

3 个答案: