Jquery插件:如何访问选项？

Question

目前我正在编写一个带有一些选项的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

Answer 1

您可以通过使用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选择的DOM元素(内部生成的UUID值)添加了一个expando-property,其值是jQuery.cache中的唯一键,基本上是存储所有数据的位置来自/取回.

要清理,请调用.removeData(key)(如果没有传递密钥,则删除所有数据).