Question

我制作了一个像这样的jQuery插件

(function($){
    $.fn.pluginname = function(options) {
        if (!this.length) { return this; }
        var settings = $.extend(true, {}, $.fn.pluginname.default, options);
        $w=$(this);
        $w.bind("click", function(e){
          e.preventDefault();
          var elm = e.target;
          elm.css({top : "+=100%"});
          elm.attr({settings.examplePre : settings.exampleInt});
        });
        return this;
    };
    $.fn.pluginname.default = {
        examplePre:"data-object",
        exampleInt: 1e3
    };
})(window.jQuery);

这会将fn.function一次应用于所选元素

所以如果被叫两次，比如..

$(document)ready(function(){
    $(".selector").pluginname({
       examplePre: "data-first"
    });
    $(".secondselector").pluginname({
       examplePre:"data-second",
       exampleInt: 10
    });
});

第二个插件调用会覆盖第一个插件。我阅读并尝试过，但我的插件布局都没有奏效。如何更改此布局，以便来自.selector和.secondselector的设置有自己的数据预设，即使调用两次。

Answer 1

您必须调整设置变量的范围，因此不受外界影响。

$.fn.pluginname = function(options) {
  return this.each(function () {
    var settings = $.extend(true, {}, $.fn.pluginname.default, options);
    $w = $(this);
    $w.bind("click", function(e) {
      e.preventDefault();
      $(this).css("top", "+=100%");
      $(this).attr(settings.examplePre, settings.exampleInt);
    });
  });
};

这是一个有效的fiddle

生成具有多个插件调用和不同设置的jquery插件

1 个答案: