javascript - 在单个页面的多个位置使用时，JQuery 插件不起作用

Question

我正在为我正在进行的项目编写一个 JQuery 插件，该项目从桌面设备上的选项卡式内容转变为移动设备上的 Accordion 。我使用 JQuery Boilerplate ( https://github.com/jquery-boilerplate/jquery-boilerplate/blob/master/dist/jquery.boilerplate.js ) 作为我的插件的初始模式。

该插件在具有“.tabs2accordion”类的任何元素上调用，如下所示:

 $(".tabs2accordion").tabs2Accordion({state:"desktop"});

如果页面上只有一个具有“.tabs2accordion”类的元素，该插件将按预期工作，但一旦将具有相同类的另一个元素添加到页面时，该插件就会开始出现故障。我已经创建了一个基本代码的代码笔来演示这个问题。要显示此问题，请在大于 768 像素的窗口上尝试单击任何标题，并观察单击每个标题时下面的内容如何变化。接下来取消注释 HTML block 并尝试再次单击标题。

http://codepen.io/decodedcreative/pen/MyjpRj

我试过像这样使用“tabs2accordion”类遍历每个元素:

$(".tabs2accordion").each(function(){
    $(this).tabs2Accordion({state:"desktop"});
});

但这也没有解决问题。

有什么想法吗？

Answer 1

我没有使用 jQuery Boilerplate，但我相信这里的问题出在名为 plugin 的变量上。

在您的代码中没有任何地方声明一个名为 plugin 的变量。当我在 Plugin.prototype.showTabContent 中停止调试器时，我可以评估 window.plugin 并返回插件的全局值。

在插件的构造函数中，第一行是plugin= this;。由于未定义 plugin，它在 window 对象上声明了全局范围内的变量。

解决方法是在设置 $().on() Hook 时传递对 plugin 对象的引用。传递的数据可通过在 data 属性中传递的 event 参数在事件处理程序中使用。

这是解决方案(位于 http://codepen.io/shhQuiet/pen/JXEjMV)

(function($, window, document, undefined) {
  var pluginName = "tabs2Accordion",
    defaults = {
      menuSelector: ".tabs2accordion-menu",
      tabContentSelector: ".tabs2accordion-content"
    };

  function Plugin(element, options) {
    this.element = element;
    this.$element = $(this.element);
    this.options = $.extend({}, defaults, options);
    this.$menu = $(this.element).find(this.options.menuSelector),
    this.$tabs = $(this.element).find(this.options.tabContentSelector),
    this.$accordionTriggers = $(this.element).find(this.$tabs).find("h3");
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
  }

  Plugin.prototype = {

    init: function() {
      //Set all the tab states to inactive
      this.$tabs.attr("data-active", false);

      //Set the first tab to active
      this.$tabs.first().attr("data-active", true);

      //If you click on a tab, show the corresponding content
      this.$menu.on("click", "li", this, this.showTabContent);

      //Set the dimensions (height) of the plugin
      this.resizeTabs2Accordion({
        data: this
      });

      //If the browser resizes, adjust the dimensions (height) of the plugin
      $(window).on("resize", this, this.resizeTabs2Accordion);

      //Add a loaded class to the plugin which will fade in the plugin's content
      this.$element.addClass("loaded");

      console.log(this.$element);

    },

    resizeTabs2Accordion: function(event) {
      var contentHeight;
      var plugin = event.data;

      if (!plugin.$element.is("[data-nested-menu]")) {
        contentHeight = plugin.$tabs.filter("[data-active='true']").outerHeight() + plugin.$menu.outerHeight();
      } else {
        contentHeight = plugin.$tabs.filter("[data-active='true']").outerHeight();
      }

      plugin.$element.outerHeight(contentHeight);
    },

    showTabContent: function(event) {
      var $target;
      var plugin = event.data;
      plugin.$menu.children().find("a").filter("[data-active='true']").attr("data-active", false);
      plugin.$tabs.filter("[data-active='true']").attr("data-active", false);
      $target = $($(this).children("a").attr("href"));
      $(this).children("a").attr("data-active", true);
      $target.attr("data-active", true);
      plugin.resizeTabs2Accordion({data: plugin});

      return false;
    },

    showAccordionContent: function(event) {
      var plugin = event.data;
      $("[data-active-mobile]").not($(this).parent()).attr("data-active-mobile", false);

      if ($(this).parent().attr("data-active-mobile") === "false") {
        $(this).parent().attr("data-active-mobile", true);
      } else {
        $(this).parent().attr("data-active-mobile", false);
      }
    }

  };

  $.fn[pluginName] = function(options) {
    return this.each(function() {
      if (!$.data(this, "plugin_" + pluginName)) {
        $.data(this, "plugin_" + pluginName, new Plugin(this, options));
      }
    });
  };

})(jQuery, window, document);

$(window).on("load", function() {
  $(".tabs2accordion").tabs2Accordion({
    state: "desktop"
  });
});