各要素のjQueryプラグイン

Question

私が構築しているシステム用に再利用可能なプラグインを作成しました。ページに1つの要素しかない限り、すべて正常に動作しているようです。私は2を持っている場合、リンクとパネルは、1回のクリックで両方のために非表示になります。プラグインがそれぞれ独立して動作するように範囲を設定するにはどうすればよいですか？

ありがとうございます。

プラグインは、タブの作成のためのものであり、このように書きます：

(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にしてください。それは非常に簡単です。