如何在一个页面上拥有多个jQuery插件实例？
我正在编写一个简单的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!"
});这显然是一个过于简单化的例子来说明这一点。我的问题是，如何拥有插件的两个独立实例？，，我希望能够在同一页面上的多个实例中使用它。
我猜问题的一部分可能是在全局范围内定义变量。那么，我如何定义插件实例所特有它们呢？
感谢您的指导！
回答 9
Stack Overflow用户
发布于 2010-09-27 13:14:03
我有非常相同的问题，但我找到了一个非常方便的解决方案，我将把它发布给可能有这个问题的人。
在插件中定义变量时，可以使用.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希望能有所帮助
Logan
Stack Overflow用户
发布于 2013-09-03 17:13:08
html：
<code class="resize1">resize1</code>
<code class="resize2">resize2</code>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.resize1').ratiofix({message:'resize1'});
$('.resize2').ratiofix({message:'resize2'});
});
</script>我找到了两个解决方案-第一个是jquery小部件工厂http://jqueryui.com/widget/ js代码：
$.widget("custom.ratiofix",{
options:{
message:"nothing"
},
_create:function (){
var self=this;
this.setListeners();
},
setListeners:function (){
var self=this;
$(window).on('resize',$.proxy(self.printMsg,self));
},
printMsg:function (){
console.log(this.options.message);
}
});第二个(没有小部件工厂)：
(function ($){
var Ratiofix = {
init: function(options, elem) {
this.options = $.extend({},this.options,options);
this.elem = elem;
this.$elem = $(elem);
this.setListeners();
return this;
},
options: {
message: "No message"
},
printMsg: function(){
console.log(this.options.message);
},
setListeners:function (){
var self=this;
this.$elem.on('click',function (){
console.log(self.options.message);
});
$(window).on('resize',$.proxy(self.printMsg, self));
}
};
$.fn.ratiofix=function (options){
this.init= function(options, elem) {
this.options = $.extend({},this.options,options);
this.elem = elem;
this.$elem = $(elem);
return this;
};
if ( this.length ) {
return this.each(function(){
var ratiofix = Object.create(Ratiofix);
ratiofix.init(options, this);
$.data(this, 'ratiofix', ratiofix);
});
}
};
})(jQuery);在这两种情况下，插件都是单独工作的，并且都有自己的设置。在我的例子中，-2\f25 widgets 2\f6监听窗口调整大小并打印到控制台自己的options.message
Stack Overflow用户
发布于 2009-10-24 05:30:02
我不确定你所说的拥有一个以上的插件实例是什么意思。可以在任何元素上使用插件。
这条评论对我来说并没有太多的澄清：
所以说它是一个插件，它接受了一个“
”参数，并将对象转换为该颜色。在这种情况下，您将需要多个实例，因为您要处理多个页面元素转换成多个颜色。
在这种情况下，您可以根据需要传递不同颜色的参数：
$('div#foo').makeColor('red');
$('div#bar').makeColor('blue');每次你调用插件时，它都会使用你给它的任何参数。插件不是需要实例的类。
https://stackoverflow.com/questions/1615894
复制相似问题