如何在单个页面上拥有多个jQuery插件实例?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (42)

我正在编写一个简单的jQuery插件,但我在一个页面上使用多个实例时遇到了困难。

例如,这里有一个示例插件来说明我的观点:

(function($) {
  $.fn.samplePlugin = function(options) {
    if (typeof foo != 'undefined')
    {
      alert('Already defined!');
    } else {
      var foo = 'bar';
    }
  };
})(jQuery);

如果我这么做

$(document).ready(function(){
  $('#myDiv').samplePlugin({}); // does nothing
  $('#myDiv2').samplePlugion({}); // alerts "Already defined!"
});

这显然是一个过于简化的例子。所以我的问题是,我如何拥有两个不同的插件实例?我希望能够在同一个页面上的多个实例中使用它。

我猜问题的那一部分可能是在全局范围内定义变量。那么,我如何定义插件实例所特有的它们呢?

谢谢你的指导!

提问于
用户回答回答于

在这种情况下,你可以根据需要传递不同颜色的参数:

$('div#foo').makeColor('red');
$('div#bar').makeColor('blue');

每次调用插件时,它都会使用你提供的任何参数。插件不是一个需要实例的类。

用户回答回答于

我也有同样的问题,但是我找到了一个非常方便的解决方案,我会把它发到可能有这个问题的人身上。

定义变量时,可以使用.data()来存储你定义的所有变量

像这样

(function($) {
  $.fn.samplePlugin = function(options) {
    var base = this;
    this.foo // define foo

    // do stuff with foo and other variables

    // Add a reverse reference to the DOM object
    this.data("pluginname", base);

  };})(jQuery);

当想使用相同的foo变量时,应该使用以下内容检索引用:

base = this.data("pluginname");
base.foo

希望能帮上忙

扫码关注云+社区

领取腾讯云代金券