Как мне добавлять и удалять активный класс с помощью 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>'s устанавливает активный класс перед нажатием новой кнопки.Как бы я это сделал?

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

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

$('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

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

$('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--;
 })
})