每个元素上的 jQuery 插件

Question

我为我正在构建的系统创建了一个可重用的插件。只要页面上只有 1 个元素，一切似乎都可以正常工作。如果我有 2 个，则只需单击一下即可隐藏链接和面板。如何确定插件的范围以使其在每个插件上独立工作？

提前致谢。

该插件用于创建选项卡，如下所示：

  (function($){

      $.fn.wbTabs = function() {

          return this.each(function(){

              // caching selectors
              $this = $(this);
              $tabLinks = $this.find('.tabs li a');
              $firstTab = $this.find('.tabs li:first a');
              $panels = $this.find('.panel');            

              // function on tab click
              $tabLinks.click(function() {
                  $panels.hide();
                  $tabLinks.removeClass('active');
                  $(this).addClass('active').blur();
                  var panel = $(this).attr('href');
                  $(panel).show();

                  // prevent link from clicking
                  return false;
              });

              // make first tab active
              $firstTab.click();           
          });
      };
  })(jQuery);

然后我用以下命令调用该插件：

 $('.wb-tabs-container').wbTabs();

Answer 1

在插件中声明变量 var 就可以了。您正在设置全局变量，这最终会破坏您的插件（并且无论如何都会在某些浏览器中失败）。小提琴：http://jsfiddle.net/brentmn/uJbxz/3/

        var $this = $(this);
        var $tabLinks = $this.find('.tabs li a');
        var $firstTab = $this.find('.tabs li:first a');
        var $panels = $this.find('.panel');

Answer 2

我可能会尝试不同的选择器方法：

$this = $(this);
$tabLinks = $('.tabs li a', $this);
$firstTab = $('.tabs li:first a', $this);
$panels = $('.panel', $this);

这对于浏览器来说也是一个更快的过程。

Answer 3

jQuery 插件/创作 指南建议“使用 jQuery 的数据方法是跟踪基于每个元素的变量。”这正是您所需要的。

还有其他方法，主要利用闭包，但数据方法更直观。

建议您采用推荐的插件模式，特别注意第6.3节数据。这很容易。