特定のコンテナを対象とするカスタムjQueryプラグイン

Question

私は自分のサイトで再利用できるjQueryタブプラグインを作成しています。ここで

<div class="js-tabs"> 
    <div id="top-text">Top 10 Best</div> 

    <ul class="top-side-tabs"> 
     <li id="selected"> 
      <a id="day" data-url="/top/day">Today</a> 
     </li> 
     <li> 
      <a id="week" data-url="/top/week">Week</a> 
     </li> 
     <li><a id="month" data-url="/top/month">Month</a> 
     </li> 
     <li> 
      <a id="year" data-url="/top/year">Year</a> 
     </li> 
    </ul> 
    <div id="top-text"> 
     <div class="js-tabs-container"> 
      <div class="loading">Loading...</div> 
     </div> 
    </div> 
</div> 

プラグイン自体されています：

(function($) { 
var tabs = {   
    fn: function(params) { 
     return this.each(function() { 
      $thisContainer = $(this); 
      $contentContainer = $thisContainer.find('.js-tabs-container').first(); 
      var $thisUl = $thisContainer.find('ul').first(); 
      var $thisLi = $thisUl.children('li'); 

      var tabs = []; 
      var tabUrls = []; 

      $thisLi.each(function() { 
       $links = $(this).children('a').attr('id'); 
       tabs.push($links); 

      }); 

      // Display first url in the container when page first loads 
      var firstTabUrl = $thisUl.find('li > a').first().data('url'); 
      //console.log(firstTabUrl); 
      $.ajax({ 
       url: firstTabUrl, 
       cache: false, 
       success: function(content) { 
        $contentContainer.empty().append(content).hide().fadeIn(500); 
        $('.loading').hide(); 
       } 
      }); 

      // Add click event handler for each tab 
      for (var i = 0; i < tabs.length; i++) { 
       var id = i; 
       $('#' + tabs[i]).bind('click', (function(id) { 
        return function() { 
         // Grab tab's url from data attribute 
         var tabUrl = $(this).data('url'); 
         // Find the js-tabs-container 
         // This is what we're changing 
         if (tabs.length) { 
          $('.loading').show(); 
          $.ajax({ 
           url: tabUrl, 
           cache: false, 
           success: function(content) { 
            $contentContainer.empty().append(content).hide().fadeIn(500); 
            $('.loading').hide(); 
           } 
          }); 
         } 
        }; 
       })(id)); 
      } 

     }); 
    } 
} 
    $.fn.tabs = tabs.fn 
})(jQuery); 

$(window).load(function() { 
    $('.js-tabs').tabs(); 
}); 

私はHTMLコード回以上は、私はそれを期待しているコピーする場合、いくつかのユニークなdiv要素のIDを使用していたという事実を無視して、以下のHTMLがあります他のものとは独立して働くことができます。何が起こっている

は次のとおりです。

A）

Top 10 Best | Today | Week | Month | Year 
[.js-tabs-container] 

B）

Top 10 Best | Today | Week | Month | Year 
[.js-tabs-container] 

は私がBの内容が再作成され、上記Aで "週" をクリックしてくださいと言います。 .each（）を複数回通過するようにも見えます（フェードインとフェードインの2回）。さらに、Bのオプションのいずれかをクリックすると、それは単に機能しません。

私はこのスタイルのプラグイン開発では、すべてを独自の名前空間に保つために新しく、メジャーなものを見落としている可能性があります。

また、これを再調整する方法についてのアドバイスは非常に高く評価されます。

Answer 1

$ thisContainerと$ contentContainerの接頭辞としてvarを残して終了しました。今正常に動作する必要があります：

(function($) { 
var tabs = { 
    fn: function(params) { 
     return this.each(function() { 
      var $thisContainer = $(this); 
      var $contentContainer = $thisContainer.find('.js-tabs-container').first(); 
      var $thisUl = $thisContainer.find('ul').first(); 
      var $thisLi = $thisUl.children('li'); 

      var tabs = []; 

      $thisLi.each(function() { 
       $links = $(this).children('a').attr('id'); 
       tabs.push($links); 

      }); 

      // Display first url in the container when page first loads 
      var firstTabUrl = $thisUl.find('li > a').first().data('url'); 

      $.ajax({ 
       url: firstTabUrl, 
       cache: false, 
       success: function(content) { 
        $contentContainer.empty().append(content).hide().fadeIn(500); 
        $('.loading').hide(); 
       } 
      }); 

      // Add click event handler for each tab 
      for (var i = 0; i < tabs.length; i++) { 
       var id = i; 
       $('#' + tabs[i]).bind('click', (function(id) { 
        return function() { 
         // Grab tab's url from data attribute 
         var tabUrl = $(this).data('url'); 
         // Find the js-tabs-container 
         // This is what we're changing 
         if (tabs.length) { 
          $('.loading').show(); 
          $.ajax({ 
           url: tabUrl, 
           cache: false, 
           success: function(content) { 
            $contentContainer.empty().append(content).hide().fadeIn(500); 
            $('.loading').hide(); 
           } 
          }); 
         } 
        }; 
       })(id)); 
      } 

     }); 
    } 
} 
$.fn.tabs = tabs.fn 
})(jQuery); 

$(window).load(function() { 
    $('.js-tabs').tabs(); 
});