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

Question

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

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

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

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

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 的构造函数中，第一行为plugin= this;。由于plugin 没有定义，它在window 对象的全局范围内声明变量。

修复方法是在设置 $().on() 挂钩时传递对 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"
  });
});

Answer 2

我按照 jQuery 的插件创建标准重写了您的代码。

http://codepen.io/justinledouxmusique/pen/GZrMgB

基本上，我做了两件事：

• 不再使用数据属性进行样式设置（改用.active 类）
• 不再到处使用this，因为它会带来一整波绑定问题...

$.fn.tabs2Accordion 循环遍历所有选择器，并应用$.tabs2Accordion。它还返回用于链接的选择器（这是 jQuery 中的标准）。

然后，所有内部方法都是函数表达式，它们与所有旧的this“变量”在同一范围内。这极大地简化了代码，因为您可以引用这些变量而无需将它们作为参数传递或不必以某种方式.bind( this )。

最后，旧的init() 功能消失了。相反，我将代码放在$.tabs2Accordion 函数的末尾。

希望这会有所帮助！

(function ( window, $ ) {
    $.tabs2Accordion = function ( node, options ) {
        var options = $.extend({}, {
                    menuSelector: '.tabs2accordion-menu',
                    tabContentSelector: '.tabs2accordion-content'
                }, options )

        var $element = $( node ),
                $menu = $element.find( options.menuSelector ),
                $tabs = $element.find( options.tabContentSelector ),
                $accordionTriggers = $tabs.find( 'h3' )

        var resizeTabs2Accordion = function () {
            $element.outerHeight( !$element.is( '[data-nested-menu]' )
                ? $element.find( 'div.active' ).outerHeight() + $menu.outerHeight()
                : $element.find( 'div.active' ).outerHeight() )
        }

        var showTabContent = function () {
            var $this = $( this ) // This will be the clicked element

            $menu
                .find( '.active' )
                    .removeClass( 'active' )

            $element
                .find( '.active' )
                    .removeClass( 'active' )

            $( $this.find( 'a' ).attr( 'href' ) )
                .addClass( 'active' )

            $this
                .find( 'a' )
                    .addClass( 'active' )

            resizeTabs2Accordion()

            return false
        }

        var showAccordionContent = function () {
            var $this                   = $( this ),
                    $parent                 = $this.parent(),
                    mobileIsActive  = $parent.data( 'active-mobile' )

            $( '[data-active-mobile]' )
                .not( $parent )
                    .data( 'active-mobile', false )

            $parent
                .data( 'active-mobile', mobileIsActive ? false : true )
        }

        // The equivalent of init()
        $tabs
            .removeClass( 'active' )
            .first()
                .addClass( 'active' )

        $element.addClass( 'loaded' )

        $menu.on( 'click', 'li', showTabContent )

        $( window ).on( 'resize', resizeTabs2Accordion )

        resizeTabs2Accordion()

        console.log( $element )
    }

    $.fn.tabs2Accordion = function ( options ) {
        this.each( function ( index, node ) {
            $.tabs2Accordion( node, options )
        })

        return this
    }
})( window, jQuery )

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