특정 컨테이너 만 타겟팅하는 사용자 정의 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()가 여러 번 반복되는 것처럼 보입니다 (두 번 페이드 인/페이드 아웃 됨). 그 중에서도 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(); 
});