Плагин jQuery для каждого элемента

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

The jQuery Plugins/Authoring руководств советует «с использованием методы данных JQuery является отличным способом, чтобы отслеживать переменные для каждого элемента основы.» Это именно то, что вам нужно.

Существуют и другие подходы, главным образом эксплуатирующие замыкания, но метод данных более интуитивно понятен.

Предложите вам принять рекомендованный шаблон плагина с особым вниманием к section 6.3 Data. Это довольно легко.