blocks|key|326682|text|我不确定你所说的拥有一个以上的插件实例是什么意思。可以在任何元素上使用插件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|326683|这条评论对我来说并没有太多的澄清：|326684|所以说它是一个插件，它接受了一个“|326685|”参数，并将对象转换为该颜色。在这种情况下，您将需要多个实例，因为您要处理多个页面元素转换成多个颜色。|blockquote|326686|326687|326688|在这种情况下，您可以根据需要传递不同颜色的参数：|326689|$('div#foo').makeColor('red');
$('div#bar').makeColor('blue');|code-block|syntax|javascript|326690|每次你调用插件时，它都会使用你给它的任何参数。插件不是需要实例的类。|326691|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|11|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|12|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|6|7|13|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|U|$]]

I'm not sure what you mean by having more than one instance of a plugin. A plugin would be available to use on any element.

This comment doesn't clarify much for me:

<blockquote>
 So say that it was a plugin that took
 a "color" parameter and turned the
 object into that color. Well, in that
 case you'd need multiple instances, as
 you're dealing with more than one page
 element turning more than one color.
</blockquote>

In this case, you would pass in different colors are arguments as needed:

<pre><code>$('div#foo').makeColor('red');
$('div#bar').makeColor('blue');
</code></pre>

Each time you call the plugin, it will use whatever arguments you give it. The plugin isn't a class that needs instances.

blocks|key|327696|text|要直接回答您的问题，您可以使用jQuery.noconflict()来避免名称空间冲突，从而可能在一个页面上有多个实例化。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|327697|var+$j+=+jQuery.noConflict();
//+Use+jQuery+via+$j(...)
$j(document).ready(function()+{
++//+etc|code-block|syntax|javascript|327698|检查here|offset|length|327699|但我质疑你的设计。为什么要编写一个看起来不能在jQuery包装集上运行的插件？在编写插件时，应该假定它们是在“this”中包含的jQuery数组上操作的。在这种情况下，任何状态都可以存储在被操作的每个项目中……但也许你正在构建一些不同的东西？|327700|请查看this+page|327701|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Using_jQuery_with_Other_Libraries|1|http://docs.jquery.com/Plugins/Authoring^0|0|0|2|4|0|0|0|3|9|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@$I|11|J|12|1|13]]|A|$]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@$I|16|J|17|1|18]]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

To answer your question directly, you can use jQuery.noconflict() to avoid namespace collisions and thus potentially have multiple instantiations on a page.. 

<pre><code>var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function() {
 // etc
</code></pre>

check <a href="http://docs.jquery.com/Using_jQuery_with_Other_Libraries" rel="nofollow noreferrer">here</a>

But I question your design. Why are you writing a plugin that appears to not operate on a jQuery wrapped set ? .. Plugins should be written to assume they are operating on a jQuery array held in 'this'. In which case any state can be stored in each of the items being acted upon... But maybe you are building something different?

Please review <a href="http://docs.jquery.com/Plugins/Authoring" rel="nofollow noreferrer">this page</a>

blocks|key|327709|text|我也有同样的问题:如何在一个表单上使用一个插件的多个实例？通常的方法失败了，因为实际上，实例不是插件的实例:它是jQuery的实例。因此，如果多个元素被定义为由一个插件管理，则每个定义都会覆盖前面的参数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|327710|有必要从另一个角度来看待这个问题。|327711|插件通常用于对特定元素的特定事件做出反应。例如..在按钮上单击，或者当鼠标位于元素上时。在我的例子中，我必须为城市字段使用自动补全插件，但我的表单有5个选项卡，总共4个城市字段，用于收集信息的4个不同部分。对于每个字段，参数都是具体的。|327712|顺便说一句，我已经意识到iI不需要每次都让插件处于活动状态:只需在赛场上的适当事件上就足够了。|327713|所以我有了一个想法:每个元素都有一个事件管理器。当事件追加时，所以我定义了插件操作。一些代码将更有效地解释:假设你有3个div块，你的插件必须改变颜色，但具体的颜色取决于哪个div受到影响。|327714|$(document).ready(function(){
++++//+Wich+elements+are+affected+by+the+plugin
++++var+ids+=+['myDiv1','myDiv2','myDiv3'];
++++//+foe+each+one+:
++++for+(v+in+ids)+
++++{
++++++++//define+from+an+event+:
++++++++$('#'%2B+ids[v]).focus(function()
++++++++{
++++++++++++//+depending+which+id+is+active+:
++++++++++++var++aParams,+idDiv+=+$(this).attr('id');
++++++++++++//+Choosing+the+right+params
++++++++++++switch(idDiv)
++++++++++++{
++++++++++++++++case+'myDiv1':
++++++++++++++++++++aParams+=+{'color':+'#660000',+'background-color':+'#0000ff'};
++++++++++++++++++++break;
++++++++++++++++case+'myDiv2':
++++++++++++++++++++aParams+=+{'color':+'#006600',+'background-color':+'#ff00ff'};
++++++++++++++++++++break;
++++++++++++++++case+'myDiv3':
++++++++++++++++++++aParams+=+{'color':+'#000066',+'background-color':+'#ff0000'};
++++++++++++++++++++break;
++++++++++++++++default:
++++++++++++++++++++aParams+=+{'color':+'#000000',+'background-color':+'#ffffff'};
++++++++++++};
++++++++++++//+Defining+the+plugin+on+the+right+element+with+the+right+params
++++++++++++$(this).myPlugin(
++++++++++++{
++++++++++++++++colors:+aParams
++++++++++++});
++++++++});
++++}
});|code-block|syntax|javascript|327715|这个可以很好的工作。|327716|对不起，如果我的英语不是很好-我希望你能理解好。|327717|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|Z|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

I had the same problem : how to use many instances of a plugin on only one form ?
The usual way fails because in fact, the instance is not an instance of the plugin : it is an instance of jQuery.
So, if more than one element is defined to be managed by a plugin, each definition overrides the previous parameters.

It was necessary to have a look on the problem from another side.

A plugin is usually made to react on a specific event for a specific element. e.g.. onclick on a button, or when the mouse is over the element.
In my case, I had to use an autocomplete plugin for a city field, but my form has 5 tabs and in total 4 fields for the cities for 4 different parts of the information to be collected.
For each fields, parameters are specifics.

By the way, I've realised iI don't need to have the plugin active everytime : just on the appropriate event on the field is enough.

So I had an idea : an event manager for each element. When the event appends, so I define the plugin action.
Some code will be more efficient to explain : imagine you have 3 div blocks and your plugin must change the colours, but with specifics colours depending on which div is affected.

<pre><code>
$(document).ready(function(){
 // Wich elements are affected by the plugin
 var ids = ['myDiv1','myDiv2','myDiv3'];
 // foe each one :
 for (v in ids) 
 {
 //define from an event :
 $('#'+ ids[v]).focus(function()
 {
 // depending which id is active :
 var aParams, idDiv = $(this).attr('id');
 // Choosing the right params
 switch(idDiv)
 {
 case 'myDiv1':
 aParams = {'color': '#660000', 'background-color': '#0000ff'};
 break;
 case 'myDiv2':
 aParams = {'color': '#006600', 'background-color': '#ff00ff'};
 break;
 case 'myDiv3':
 aParams = {'color': '#000066', 'background-color': '#ff0000'};
 break;
 default:
 aParams = {'color': '#000000', 'background-color': '#ffffff'};
 };
 // Defining the plugin on the right element with the right params
 $(this).myPlugin(
 {
 colors: aParams
 });
 });
 }
});</code></pre>

And this works fine.

Sorry if my English is not perfect - I hope you understand well.

blocks|key|3295767|text|我有非常相同的问题，但我找到了一个非常方便的解决方案，我将把它发布给可能有这个问题的人。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3295768|在插件中定义变量时，可以使用.data()来存储您定义的所有变量|3295769|像这样|3295770|(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);|code-block|syntax|javascript|3295771|当你想使用相同的foo变量时，你应该用下面的代码来检索引用：|3295772|base+=+this.data("pluginname");
base.foo|3295773|希望能有所帮助|3295774|Logan|3295775|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

I have the very same problem but i find a very handy solution i´ll post it for someone who may have this problem

when you define your variables insinde the plugin you could use the .data() to store all the variables you define

like this

<pre><code>(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);
</code></pre>

And when you want to use the same foo variable you should retrive the reference with this:

<pre><code>base = this.data("pluginname");
base.foo
</code></pre>

Hope it helps

Logan

blocks|key|326726|text|与其写这篇文章，不如|type|unstyled|depth|inlineStyleRanges|entityRanges|data|326727|$("#divid1").samplePlugin();
$("#divid2").samplePlugin();|code-block|syntax|javascript|326728|你可以这样做|326729|$.plugin('samplePlugin1',+samplePlugin);
$("#divid1").samplePlugin1();

$.plugin('samplePlugin2',+samplePlugin);
$("#divid2").samplePlugin2();|326730|您可以从此处http://alexsexton.com/?p=51获得更多详细信息|offset|length|326731|entityMap|0|LINK|mutability|MUTABLE|url|http://alexsexton.com/?p=51^0|0|0|0|0|6|R|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

instead of writing this

<pre><code>$("#divid1").samplePlugin();
$("#divid2").samplePlugin();
</code></pre>

you can do this way

<pre><code>$.plugin('samplePlugin1', samplePlugin);
$("#divid1").samplePlugin1();

$.plugin('samplePlugin2', samplePlugin);
$("#divid2").samplePlugin2();
</code></pre>

You can have much details from here 
<a href="http://alexsexton.com/?p=51" rel="nofollow">http://alexsexton.com/?p=51</a>

blocks|key|330114|text|这对我来说是一种享受！对于我想要运行插件的页面/位置，我有特定的参数，并且能够通过使用简单的if语句来实现。希望这对某些人有帮助！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|330115|
<script+src="js/foo_fun.js"></script>

<?php+
if(substr_count(strtolower($currentUrl),"member")>0)
{
?>
++++<script>
++++$(document).ready(function(){
++++++++$('#vscroller').vscroller({newsfeed:'news_employee.xml',+speed:1000,stay:2000,cache:false});
++++});
++++</script>
<?php
}
else
{
?>
++++<script>
++++$(document).ready(function(){
++++++++$('#vscroller').vscroller({newsfeed:'news_company.xml',+speed:1000,stay:2000,cache:false});
++++});
++++</script>
<?php
}
?>
+|code-block|syntax|javascript|330116|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This worked a treat for me! I had specific parameters for which pages/places I wanted to run a plugin and was able to achieve success by using a simple if statement. Hope this helps someone!

<pre><code>&lt;!-- Begin JQuery Plugin Foo --&gt;
&lt;script src="js/foo_fun.js"&gt;&lt;/script&gt;

&lt;?php 
if(substr_count(strtolower($currentUrl),"member")&gt;0)
{
?&gt;
 &lt;script&gt;
 $(document).ready(function(){
 $('#vscroller').vscroller({newsfeed:'news_employee.xml', speed:1000,stay:2000,cache:false});
 });
 &lt;/script&gt;
&lt;?php
}
else
{
?&gt;
 &lt;script&gt;
 $(document).ready(function(){
 $('#vscroller').vscroller({newsfeed:'news_company.xml', speed:1000,stay:2000,cache:false});
 });
 &lt;/script&gt;
&lt;?php
}
?&gt;
&lt;!-- End JQuery Foo--&gt; 
</code></pre>

blocks|key|3082456|text|您需要使用this.foo而不是var+foo，以便该变量只与当前对象相关。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3082457|entityMap^0|5|8|G|7|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

You need to use <code>this.foo</code> instead of <code>var foo</code>, so that the variable is only related to the current object.

blocks|key|325102|text|我只是把我的解决方案放在这里：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|325103|(function+($){

++++$.fn.plugin+=+function+(options){
++++++++var+settings+=+$.extend({},+$.fn.plugin.defaults,+options);
++++++++settings.that+=+$(this);
++++++++$.fn.plugin.init+(settings);
++++};

++++$.fn.plugin.defaults+=+{+objval:+'default'+};

++++$.fn.plugin.init+=+function+(settings){
++++++++settings.that.val+(settings.objval);
++++};

}(+jQuery+));

$('#target1').plugin+({objval:+'not+default'});
$('#target2').plugin+();|code-block|syntax|javascript|325104|DEMO|offset|length|325105|每次初始化对象时，都会隔离设置变量。|325106|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/AmiPulU/1/edit^0|0|0|0|4|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Just throwing my solution in here:

<pre><code>(function ($){

 $.fn.plugin = function (options){
 var settings = $.extend({}, $.fn.plugin.defaults, options);
 settings.that = $(this);
 $.fn.plugin.init (settings);
 };

 $.fn.plugin.defaults = { objval: 'default' };

 $.fn.plugin.init = function (settings){
 settings.that.val (settings.objval);
 };

}( jQuery ));

$('#target1').plugin ({objval: 'not default'});
$('#target2').plugin ();
</code></pre>

<a href="http://jsbin.com/AmiPulU/1/edit" rel="nofollow">DEMO</a>

The settings variable is isolated every time you initialize the object.

blocks|key|326752|text|html：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|326753|<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>|code-block|syntax|javascript|326754|我找到了两个解决方案-第一个是jquery小部件工厂http://jqueryui.com/widget/+js代码：|offset|length|326755|$.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);
++++}
});|326756|第二个(没有小部件工厂)：|326757|(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);|326758|在这两种情况下，插件都是单独工作的，并且都有自己的设置。在我的例子中，-2\f25+widgets+2\f6监听窗口调整大小并打印到控制台自己的options.message|326759|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/widget/^0|0|0|Q|R|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|K|3|L|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

html:

<pre><code>&lt;code class="resize1"&gt;resize1&lt;/code&gt;
&lt;code class="resize2"&gt;resize2&lt;/code&gt;


&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;
&lt;script src="js/plugins.js"&gt;&lt;/script&gt;
&lt;script src="js/main.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
 jQuery(document).ready(function($) {
 $('.resize1').ratiofix({message:'resize1'});
 $('.resize2').ratiofix({message:'resize2'});
 });
&lt;/script&gt;
</code></pre>

I have found 2 solutions - the first one is jquery widget factory
<a href="http://jqueryui.com/widget/" rel="nofollow">http://jqueryui.com/widget/</a>
js code:

<pre><code>$.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);
 }
});
</code></pre>

And the second (without widget factory):

<pre><code>(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);
</code></pre>

In both cases plugins work separately and have own settings. In my case - 2 widgets listen to window resize and print to console own options.message

I'm writing a simple jQuery plugin, but I'm having trouble being able to use multiple instances on a page.

For instance, here is a sample plugin to illustrate my point:

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

And then if I do this:

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

This is obviously an over-simplified example to get across the point. So my question is, how do I have two separate instances of the plugin? I'd like to be able to use it across multiple instances on the same page.

I'm guessing that part of the problem might be with defining the variables in a global scope. How can I define them unique to that instance of the plugin then?

Thank you for your guidance!

How to have multiple instances of jQuery plugin on single page?

jQuery

我正在编写一个简单的jQuery插件，但是我在一个页面上使用多个实例时遇到了问题。例如，这里有一个示例插件来说明我的观点：(function($) {  $.fn.samplePlugin = function(options) {    if (typeof foo != 'undefined')    {     ...

问如何在一个页面上拥有多个jQuery插件实例？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在一个页面上拥有多个jQuery插件实例？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在一个页面上拥有多个jQuery插件实例？
EN