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 Plugins/Authoring指南建议“使用jQuery的数据方法是一种基于每个元素跟踪变量的好方法。”这正是您所需要的。

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

建议您采用推荐的插件模式，特别注意section 6.3 Data。这很容易。

每个元素上的jQuery插件

3 个答案: