如何为
jquery-plugin提供单独的局部变量,这些变量可以在不同的插件函数中访问?
我的脚本显示内容为“123”的警报,但我期待’abc’.所以变量’t’只存在一次而不是每个插件两次.因此,对于每个插件实例,应该还有一个变量’t’的实例.
<html> <head> <title></title> <script type="text/javascript" src="jquery/jquery-1.7.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript"> (function ($) { var t = null; $.fn.doSomething = function() { alert(t); } $.fn.myHtmlControl = function(option) { t = option; } })(jQuery); $(function () { $('#ctrl1').myHtmlControl("abc"); $('#ctrl2').myHtmlControl("123"); $('#ctrl1').doSomething(); }) </script> </head> <body> <div id='ctrl1'>Ctrl1</div> <div id='ctrl2'>Ctrl2</div> </body> </html>
解决方法@H_403_8@
通常的方法是使用
data
函数存储与元素本身上的特定元素相关的信息.所以在你的情况下(
live example):
(function ($) {
$.fn.doSomething = function()
{
alert(this.data("myHtmlControl"));
}
$.fn.myHtmlControl = function(option) {
this.data("myHtmlControl",option);
}
})(jQuery);
如果您需要存储多个选项,这是一个更强大的示例(live copy):
(function ($) {
var defaults = {
msg1: "(msg1)",msg2: "(msg2)"
};
$.fn.doSomething1 = function()
{
alert(getOption(this,"msg1"));
return this;
}
$.fn.doSomething2 = function()
{
alert(getOption(this,"msg2"));
return this;
}
$.fn.myHtmlControl = function(options) {
this.data("myHtmlControl",$.extend({},defaults,options));
return this;
};
function getOption(inst,name) {
var obj = inst.data("myHtmlControl");
return (obj || defaults)[name];
}
function setOption(inst,name,value) {
var obj = inst.data("myHtmlControl");
if (!obj) {
obj = $.extend({},defaults);
inst.data("myHtmlControl",obj);
}
obj[name] = value;
}
})(jQuery);
jQuery(function($) {
$("#theButton").click(function() {
$('#ctrl1').myHtmlControl({msg1: "abc"});
$('#ctrl2').myHtmlControl({msg2: "123"});
alert("about to do ctrl1");
$('#ctrl1').doSomething1().doSomething2();
alert("about to do ctrl2");
$('#ctrl2').doSomething1().doSomething2();
});
});
data
函数存储与元素本身上的特定元素相关的信息.所以在你的情况下(
live example):
(function ($) { $.fn.doSomething = function() { alert(this.data("myHtmlControl")); } $.fn.myHtmlControl = function(option) { this.data("myHtmlControl",option); } })(jQuery);
如果您需要存储多个选项,这是一个更强大的示例(live copy):
(function ($) { var defaults = { msg1: "(msg1)",msg2: "(msg2)" }; $.fn.doSomething1 = function() { alert(getOption(this,"msg1")); return this; } $.fn.doSomething2 = function() { alert(getOption(this,"msg2")); return this; } $.fn.myHtmlControl = function(options) { this.data("myHtmlControl",$.extend({},defaults,options)); return this; }; function getOption(inst,name) { var obj = inst.data("myHtmlControl"); return (obj || defaults)[name]; } function setOption(inst,name,value) { var obj = inst.data("myHtmlControl"); if (!obj) { obj = $.extend({},defaults); inst.data("myHtmlControl",obj); } obj[name] = value; } })(jQuery); jQuery(function($) { $("#theButton").click(function() { $('#ctrl1').myHtmlControl({msg1: "abc"}); $('#ctrl2').myHtmlControl({msg2: "123"}); alert("about to do ctrl1"); $('#ctrl1').doSomething1().doSomething2(); alert("about to do ctrl2"); $('#ctrl2').doSomething1().doSomething2(); }); });