Jquery 插件：如何访问选项？答案

【问题标题】：Jquery plugins: how to access options?Jquery 插件：如何访问选项？
【发布时间】：2009-10-20 09:19:46
【问题描述】：

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

【问题讨论】：

对不起 - 应该在第一个列表中写 $("#div1"), $("#div2")
我认为您的 return 语句也需要在插件的函数范围内。目前，它在它之外（但在自调用匿名函数的函数范围内）。你想编辑你的问题代码吗？
哦，是的，谢谢 - 已更正

标签： jquery jquery-plugins

【解决方案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)（如果没有传递任何键，则删除所有数据）。

【讨论】：

嗨，这是传递期权价值的标准方式吗？或者它是一个黑客？

【解决方案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

【讨论】：

【解决方案3】：

简单的答案是：你不能。在每个实例中传递给插件的options object 用于为本地声明的对象options 的属性分配值，该对象将无法在插件函数范围之外访问。

您可能会想出一些方法来做您想做的事，例如，您传入的options object 的其他属性。

【讨论】：

我可以在插件内部再写一个函数，可以将所需的选项传递到外部吗？

【解决方案4】：

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

【讨论】：

【解决方案5】：

见this answer 第二部分解决了这个问题，而无需重组你的插件。基本上使您的选项全局化，并且一旦第一次初始化就可以访问它们

【讨论】：