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()个字符，并获取第二部分以返回我们想要的数字。

jquery基于另一个元素的当前类将数字类添加到元素

1 个答案: