Question

我有一个JQuery 1.4.2插件，它使用一组选项。它的伪代码是这样的：

 (function($) {
  // Shell for the plugin code
  $.fn.myPlugIn = function(options) {
    // Plugin code
    return this.each(function() {
      // for each item in selector
      options = $.extend($.fn.myPlugIn.defaults, options);
      ...do stuff
    });
    $.fn.myPlugIn.defaults = {
    header      :   null,
    position    :   'absolute',
    top         :   null,
    left        :   null,
    forinput    :   null,
    forAnchor   :   null,
    sAjaxSource :   null,
    onClick     :   null
  };
  })(jQuery);

在单个页面上调用多个元素的插件时，选项不是唯一的 - 前面的元素选项仍在选项中。

$(document).ready(function() {
    $("#div1").myPlugIn(
            {forinput: "input1",
             onClick: function(data){
                ... do stuff
            },
    });
    $("#div2").myPlugIn({
          forAnchor: "link1",
            onClick: function(data){
                ... do stuff
             },
        header: "Parts"
    });

});

我做错了什么？我希望每次找到插件时，它都会使用传递给它的选项。相反，它使用保留第一个实例中的所有选项，并覆盖第二个实例中的任何重新初始化的属性。

任何回复都表示赞赏。提前感谢您阅读我的帖子。

Answer 1

您需要将选项合并到该实例的 new 对象中，如下所示：

options = $.extend({}, $.fn.myPlugIn.defaults, options);

$.extend()合并到第一个参数之后作为参数传递的所有对象，因此它们目前正在合并到您的$.fn.myPlugIn.defaults默认值中，使其在下次使用时受到污染。相反，你想永远不要搞乱默认值（除非故意在别处更改它们）并将选项和默认值合并到另一个新对象中。

Answer 2

第二件事是添加'var options = ...'，省略var使其成为全局变量，将那些设置选项设置为最后调用的属性。

为什么我的JQuery插件没有得到它自己的实例？

2 个答案: