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）（如果未传递任何密钥，则删除所有数据）。

Answer 2

(function($) {
 $.fn.myFunc = function(options) {
  var options = $.extend( {
   width: 300,
   height: 200
  }, options);

     return this.each(function() {

         $(this).bind('click', {myOptions: options}, function(event) {
              optionsHere = event.data.myOptions;
         });
     });
 }
})(jQuery);

“如果无法做到这一点，您可以将其他数据作为第二个参数传递（并将处理函数作为第三个参数传递）......”

jQuery bind

Answer 3

简单的答案是：你不能。在每个实例中传入插件的options object用于为本地声明的对象options的属性赋值，这些对象在插件函数范围之外是不可访问的。

您可能会想出一些方法来执行您想要的操作，例如，您传入的options object的其他属性。

Answer 4

为什么不在插件中添加一个返回选项对象的方法？

Answer 5

请参阅this answer第二部分解决问题而不重新构建您的插件。基本上使您的选项全局化，并且首次初始化后可以访问它们

Jquery插件：如何访问选项？

5 个答案: