Jquery插件：如何访问选项？

目前我正在编写一个带有一些选项的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)(如果没有键被传递,所有的数据被删除).

Jquery插件：如何访问选项？

解决方法

猜你在找的jQuery相关文章