jquery добавляет числовой класс к элементу на основе текущего класса другого элемента

У меня есть следующий 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>

Что мне нужно сделать, так это добавить класс в div #tower на основе выбранного в данный момент элемента #tab. Так, например, если мы находимся на #tab li = 2, то #tower div получит class="active_level_2". Другими словами, возьмите значение «текущего» элемента списка #tab и используйте его для создания «active_level_#».

Заранее спасибо!


jquery jquery-traversing addclass removeclass
person vibe9    schedule 05.04.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете получить атрибут 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(), и получит вторую часть, чтобы вернуть число, которое мы хотим.

person Daniel Imms    schedule 05.04.2013
comment
Это потрясающе, спасибо Дэниэл. У меня возникли проблемы с реализацией этого. Кажется, что вместо того, чтобы присваивать #tower текущий класс, он назначает следующий класс над ним. Кроме того, когда вы спускаетесь на уровень, он не удаляет и не переназначает следующий подходящий класс. Чтобы дать вам лучшее представление, на практике я пытаюсь имитировать функциональность, показанную здесь. - person vibe9; 05.04.2013
comment
Итак, как вы можете видеть в скрипке, единственная проблема заключается в том, чтобы снова изменить класс, когда вы возвращаетесь к элементам #tabs. Как перезаписать класс? - person vibe9; 05.04.2013
comment
Это просто фантастика. Большое спасибо! - person vibe9; 05.04.2013