Как добавить и удалить активный класс с помощью jQuery?

Question

У меня есть неупорядоченный список.

<style> 
    #button1 { position:relative; z-index: 3; } 
    #button2 { position:relative; z-index: 2; } 
    #button3 { position:relative; z-index: 1; } 
</style> 

<ul> 
    <li id="button1">Button 1</li> 
    <li id="button2">Button 2</li> 
    <li id="button3">Button 3</li> 
</ul> 

В настоящее время я использую css, чтобы каждый идентификатор отличался от z-индекса, так что одна кнопка немного сверху. Я хочу использовать jQuery, чтобы добавить класс, который добавляет намного более высокий z-индекс, к любой кнопке, на которую была нажата кнопка, например «999», чтобы убедиться, что она будет поверх двух других кнопок. Я не могу понять, как добавить активный класс в текущий щелчок <li> при удалении активного класса с любой установленной в данный момент кнопки. Я не знаю, как заставить jQuery выяснить, какой из двух других <li> имеет активный набор классов перед нажатием новой кнопки. Как мне это сделать?

Также я не уверен, что добавление класса решит проблему, так как я уже устанавливаю z-индекс, нацеливая идентификатор <li>. Может быть, мне нужно будет повлиять на встроенный css для текущей нажатой кнопки, чтобы он переопределял css идентификатора, а также проверил, чтобы увидеть, какой из двух других имеет встроенный css-индекс z-index, равный '999', чтобы он мог удалить свои inline css и иметь больший z-индекс, чем другие две кнопки и отображаться сверху?

Answer 1

Для того, чтобы ответить Коби в немного дальше. Я бы дал ли (-и) некоторый общий класс, если это возможно, или id на ul.

var $li = $('li.clickMe'); // or var $li = $('#id li'); 

$li.click(function(){ 
    $li.removeClass('active'); 
    $(this).addClass('active'); 
}); 

Если вы устанавливаете Z-индекс, основанный на идентификаторах, то правило CSS для ID, скорее всего, имеют приоритет над любым правилом на основе класса. Вы также можете добавить свойство z-index в строку и изменить его с помощью jQuery.

var $li = $('li.clickMe'); // or var $li = $('#id li'); 

$li.click(function(){ 
    $li.css('z-index', 1); // Sets all li(s) to z-index of 1. 
    $(this).css('z-index', 999); 
}); 

Answer 2

, если я правильно понимаю, должно быть

$('li').click(function(){ 
    $('.active').removeClass('active'); 
    $(this).addClass('active') 
}); 

Edit - то, что вы испытываете, проблема CSS - #id правила имеют приоритет .class правил.

Чтобы ответить на ваш вопрос, вы можете установить Z-индекс с помощью:

$(this).css('z-index', 999); 

Answer 3

лучшей практикой является использование класса, но вы можете также изменить свойства стиля, как

$('li').click(function(){ 

    var li = $(this); 

    // check the highest z-index 
    var maxIndex = 4; 

    $('li').each(function(){ 
    var zindex = $(this).css("z-index"); 
    if (parseInt(zindex) > maxIndex) 
    { 
     maxIndex = parseInt(zindex); 
    } 
    }); 

    // increment by 1 
    maxIndex++; 

    li.css('z-index', maxIndex); 
}); 

Answer 4

Глядя на все, что вам ответы и на нахождении селектора братьев и сестер, я понял ответ это просто и работает для меня. Скажите, пожалуйста, если что-то не так с ним, кроме того, что я не использовал классы. Я думаю, что для моей ситуации это работает красиво! Спасибо за помощь всем вашим парням!

$('li').click(function(){ 
     $(this).css({'z-index' : '999'}) 
     .siblings().css({'z-index' : ''}); 
}); 

С ответом smack0007 помог мне больше всего, чтобы получить ответ, я использую, я даю ему/ей галочку.

Answer 5

Вот еще один способ ... это хранит z-индекс и заменяет его, если не активная кнопка.

$(document).ready(function(){ 
var indx = $('li[id*="button"]').length; 
$('#button1').addClass('active'); 
$('li[id*="button"]').each(function(){ 
    $(this).css('z-index',indx).data('zindx', indx); 
    $(this).click(function(){ 
    var active = $('.active'); 
    active.css('z-index', active.data('zindx')).removeClass('active'); 
    $(this).addClass('active').css('z-index',999); 
    }) 
    indx--; 
}) 
})