كيف يمكنني إضافة وإزالة فئة نشطة مع 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> أثناء إزالة الفئة النشطة من أي زر يحتوي حاليا على مجموعة. أنا لا أعرف كيفية جعل مسج معرفة أي من اثنين آخرين <li>يحتوي على مجموعة فئة نشطة قبل دفع الزر الجديد. كيف أذهب للقيام بذلك؟

أيضا أنا لست متأكدا مما إذا كان إضافة فئة ستحل المشكلة لأنني أقوم بالفعل بتعيين مؤشر Z من خلال استهداف <li>معرف. ربما أحتاج إلى التأثير على CSS المضمنة للزر الذي تم دفعه حاليا في الوقت الحالي، لذلك فهو يتجاوز CSS المعرفي، ولديه أيضا التحقق لمعرفة أي من الاثنين الآخران يحتوي على مؤشر CSS Z مضمن على "999" حتى تتمكن من إزالة مضمنة CSS والحصول على مؤشر Z أكبر من الأزرار الأخرى وتظهر في الأعلى؟

Answer 1

لاتخاذ إجابة Kobi أكثر قليلا. أود أن أعطي لي (ق) بعض الطبقة المشتركة إن أمكن أو معرف على 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 باستخدام:

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