每個元素上的jQuery插件

我爲我正在構建的系統創建了一個可重用的插件。所有似乎工作正常，只要我只有一個元素在頁面上。如果我有2個，鏈接和麪板只需單擊一次即可隱藏。我如何限制插件在每個插件上獨立工作？每個元素上的jQuery插件

在此先感謝。

該插件是標籤的創建和是這樣的：

(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();

來源

2012-01-26 Adam

你能舉出一個例子或jsfiddle嗎？ – j08691 2012-01-26 23:28:57

聲明你的變量，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');

來源

2012-01-27 00:01:45

這真棒。謝謝布倫特。我確切地看到你在說什麼。 – Adam 2012-01-27 08:03:13

我想可能需要嘗試不同的選擇方法：

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

這對瀏覽器來說也是一個更快的過程。

來源

2012-01-26 23:30:22

我沒有意識到我可以做到這一點，我想找到一個避免.find（）的好方法。我會給這個鏡頭。感謝史蒂夫O .... – Adam 2012-01-27 08:04:33

沒有probs的傢伙。讓我知道你如何得到:) – 2012-01-27 10:01:11

的jQuery Plugins/Authoring指南建議「使用jQuery的數據的方法是跟蹤變量的每個元素的基礎上的好方法。」這正是你需要的。

還有其他方法，主要是利用閉包，但數據方法更直觀。

建議您採用推薦的插件模式，特別注意section 6.3 Data。這很容易。

來源

2012-01-27 00:28:30

謝謝甜菜根，我一定會仔細考慮一下。 – Adam 2012-01-27 08:03:57

每個元素上的jQuery插件

回答

相關問題