目前我正在编写一个带有一些选项的jQuery插件.
来自网页的简化代码示例：
<div id="div1"></div>
<div id="div2"></div>
$(document).ready(function(){
$("#div1").myFunc({width: 100,height: 100});
$("#div2").myFunc({width: 200,height: 200});
});
这是一个(再次简化)的插件代码：
(function($) {
$.fn.myFunc = function(options) {
// extending default settings
var options = $.extend( {
width: 300,height: 200
},options);
return this.each(function() {
// doing something for example with #div1
$(this).click(function() {
// here I need to access ANOTHER (e.g. #div2) object's options
// how can I do it?
});
});
}
})(jQuery);
那么问题是在列表中 – 如何从插件的函数内部访问另一个对象的选项？像$(“#div2”).options.width
解决方法
您可以使用jQuery的.data(key,val)方法在您的插件访问它们之前设置这些选项来实现此目的：
// set 'options' for '#div2'
$("#div2").data('options',{width: 500,height: 500});
// get 'options' for '#div2' (this would be in your plugin code)
var opts = $('#div2').data('options');
alert('options.height:' + opts.height + '\n'
'options.width:' + opts.width);
当您将数据存储到类似字典的对象时,您可以设置几乎所需的任何数据：
$("#div2").data('priority',2);
$("#div2").data('flagColors',['red','white','blue']);
$("#div2").data('parts',{arm: 2,legs: 2});
…并在以后检索：
var foo = $("#div2").data('priority');
var foo2 = $("#div2").data('flagColors');
var foo3 = $("#div2").data('parts');
在幕后,jQuery为您的jQuery选择(内部生成的UUID值)的DOM元素添加了一个expando属性,其值是jQuery.cache中的唯一键,它基本上位于所有数据的存储位置从/检索.
要清理,请调用.removeData(key)(如果没有键被传递,所有的数据被删除).