基於jQuery當前類的另一個元素的添加數字類元素

Question

我有以下的HTML

<ul id="tabs"> 
    <li>1</li> 
    <li>2</li> 
    <li>etc...</li> 
</ul> 

，我使用追加「按鈕」遍歷「向上」或「向下以下jQuery函數「名單，而只有 」顯示「 當前項目：

$('#tabs li').first().attr('class', 'current'); 

$('#tabs li').each(function(i) { 
    i = i + 1; 

$(this).attr('id', 'tab-' + i); 

if(i !== $('#tabs li').size()) { 
    $(this).append('<a class="tabPagination next floor-up" rel="tab-' + (i + 1) + '" href="/keyplate/' + (i + 1) + '">Up</a>'); 
    } 
    if(i !== 1) { 
     $(this).append('<a class="tabPagination next floor-down" rel="tab-' + (i - 1) + '" href="/keyplate/' + (i - 1) + '">Down</a>'); 
    }     
});    

$('#tabs li[class!="current"]').hide(); 

$(document).on("click", "a.tabPagination", function(){ 
    $('.current').removeAttr('class'); 
    $('#tabs li[class!="current"]').hide();  
    $('#' + $(this).attr('rel')).show(); 

}); 

我還有一個DIV：

<div id="tower"></div> 

我需要做的是根據當前選擇的#tab項目向#tower div添加一個類。例如，如果我們在#tab li = 2上，那麼#tower div會得到class =「active_level_2」。換句話說，取'current'#tab列表項的值並使用它來創建「active_level_＃」。

在此先感謝！

Answer 1

您可以獲得屬性rel並將其拆分以獲取用於active_level_類的最後一個數字。我們現在可以將$(this)變成一個變量，因爲它已被多次使用。

jsFiddle

$(document).on("click", "a.tabPagination", function(){ 
    var tab = $(this); 
    $('.current').removeAttr('class'); 
    $('#tabs li[class!="current"]').hide();  
    $('#' + tab.attr('rel')).show(); 
    for (var i = 1; i <= 6; i++) 
     $('#tower').removeClass('active-level-' + i); 
    $('#tower').addClass('active_level_' + tab.attr('rel').split('-')[1]); 
}); 

tab.attr('rel').split('-')[1]將獲得標籤的rel屬性，使用split()並獲得第二部分返回我們想要的號碼拆分字符串爲兩個在-字符。