如何为
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>
解决方法
通常的方法是使用
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();
});
});
