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

generating jquery plugin with multiple plugin calls and different settings

本文关键字：插件 设置 jquery 调用      更新时间：2023-11-17

我制作了一个类似的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.函数

所以如果叫了两次，比如。。

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

第二个插件调用覆盖第一个插件调用。我阅读并尝试过，但我的插件布局都不起作用。如何更改此布局，以便.selector和.secondselector的设置获得自己的数据预设，即使调用两次也是如此。

您必须确定设置变量的范围，这样它就不会受到外部的影响。

$.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);
    });
  });
};

这是一个工作小提琴

相关文章：