Как добавить и удалить активный класс с помощью 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-index, ориентируясь на идентификатор <li>. Возможно, мне нужно будет повлиять на встроенный css для текущей нажатой кнопки, чтобы он переопределял css идентификатора, а также проверить, какой из двух других имеет встроенный z-index для css, установленный в «999», чтобы он мог удалить их встроенные CSS и имеют больший z-индекс, чем две другие кнопки и отображаются сверху?

Answer 1

Чтобы принять ответ Коби немного дальше. Я бы дал li (s) некоторый общий класс, если это возможно, или идентификатор на ul.

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

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

Если вы устанавливаете z-индекс на основе идентификаторов, тогда правило css для идентификатора, скорее всего, будет иметь приоритет над любым правилом на основе классов. Вы также можете поместить свойство 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(){

  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 3

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

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

Изменить - проблема с CSS - #id правила имеют приоритет перед .class правилами.

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

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

Answer 4

Вот еще один метод ... он сохраняет 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--;
 })
})

Answer 5

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

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

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