爲什麼'活動'類沒有被分配到內容列表項目？

Question

下面是我爲標籤寫的一個插件。我相信有更好的方法來寫這個，但是當我開始完善這個插件的時候會有更好的方法。這是一個正在學習的個人項目。問題是，當我單擊其中一個選項卡時，「活動」類沒有被分配給相應的內容li標籤。我將id分配給每個li使用for循環。

如果我從將活動類分配給正確的li標籤的循環中刪除(cEvent + 1)，那麼它將爲所有li標籤分配一個「活動」類 - 因爲我知道選擇器是正確的。當我在循環中添加(cEvent + 1)時，它不會分配任何東西。

有問題的部分是：// Click Event: Open New Tab

謝謝大家非常的幫助。

(function(){ 
$.fn.sctabs = function(options){ 
    var defaults = { 
     tabsTheme  : 'default', 
     tabsOrientation : 'horizontal', // horizontal, vertical 
     tabsClassName : 'tab', 
     contentClassName: 'tabcontent', 
     activeClass  : 'active', 
     initActiveItem : ':first-child', 
     tabsEffOpen  : 'slideDown', 
     tabsEffClose : 'slideUp' 
    }; 

    var options = $.extend(defaults,options); 

    console.log('Tabs Plugin Successfully Loaded'); 

    // Add Theme 
    $(this).addClass(options.tabsTheme); 

    // Set Tabs Orientation 
    $(this).addClass(options.tabsOrientation); 

    // Add Initial Classes 
    $('ul.popuptabslist li').addClass(options.tabsClassName); 
    $('ul.popuptabsoutput li').addClass(options.contentClassName); 

    // Assign Tabs/Content to Var 
    var tabsList = $('ul.popuptabslist li'); 
    var contentsList = $('ul.popuptabsoutput li'); 

    // Set the stopping point dynamically 
    tabsLength = tabsList.length; 
    contentsLength = contentsList.length; 

    // Tabs Loop: Start the index at 0 
    t = 0; 
    for (; t < tabsLength; t++) { 
     tabsList[t].id = "tab" + (t + 1); 

     console.log('Tab id' + (t + 1) + ' Created'); 
    } 

    // Contents Loop: Start the index at 0 
    c = 0; 
    for (; c < contentsLength; c++) { 
     contentsList[c].id = "content" + (c + 1); 

     console.log('Tab Content id' + (c + 1) + ' Created'); 
    } 

    // Set Initial Item Open 
    $('ul.popuptabslist ' + options.initActiveItem + ', ul.popuptabsoutput ' + options.initActiveItem) 
     .addClass(options.activeClass); 

    // Click Event: Open New Tab 
    cEvent = 0; 
    for (; cEvent < tabsLength; cEvent++){ 
     $('ul.popuptabslist li#tab' + (cEvent + 1)).on('click', function(){ 

      // Remove Active Class on Click 
      $('ul.popuptabslist li.tab').removeClass(options.activeClass); 
      $(this).parent().parent().find('ul.popuptabsoutput li.tabcontent').removeClass(options.activeClass); 

      // Add Active Class to Clicked Tab and Corresponding Content 
      $(this).addClass(options.activeClass); 
      $('ul.popuptabsoutput li#content' + (cEvent + 1)).addClass(options.activeClass); 
      $(this).parent().parent().find('ul.popuptabsoutput li#content' + (cEvent + 1)).addClass(options.activeClass); 

      console.log($(this).attr('id').toUpperCase() + ' clicked'); 
     }); 
    } 

}; 
})(jQuery); 

Answer 1

這是你正在處理的臭名昭着的閉包世界。當您在標籤上綁定事件時，變量cEvent正在遞增，這意味着每個事件的最後一個實例cEvent爲id。

您可以使用自動關閉功能：

(function(cEvent){ 
      $('ul.popuptabslist li#tab' + (cEvent + 1)).on('click', function(){ 

       // Remove Active Class on Click 
       $('ul.popuptabslist li.tab').removeClass(options.activeClass); 
       $(this).parent().parent().find('ul.popuptabsoutput li.tabcontent').removeClass(options.activeClass); 

       // Add Active Class to Clicked Tab and Corresponding Content 
       $(this).addClass(options.activeClass); 
       $('ul.popuptabsoutput li#content' + (cEvent + 1)).addClass(options.activeClass); 
       $(this).parent().parent().find('ul.popuptabsoutput li#content' + (cEvent + 1)).addClass(options.activeClass); 

       console.log($(this).attr('id').toUpperCase() + ' clicked'); 
      }); 
     })(cEvent); 

小提琴：http://jsfiddle.net/B8e8W/1/