どのように私は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>

私は現在、一つのボタンは、次の上にわずかになるように各IDに異なるz屈折率を与えるために、CSSを使用しています。私は何をしたいものは何でもボタンにはるかに高いZインデックスです追加クラスを追加するためにjQueryを使用することです、それは他の二つのボタンの上になることを保証するために、このような「999」とクリックされました。私は現在、それが設定されているものは何でもボタンからアクティブなクラスを除去しながら、現在クリックされた<li>にアクティブなクラスを追加する方法を見つけ出すことはできません。私はjQueryの新しいボタンが押される前に、アクティブなクラスが設定されている他の二つの<li>のどちらの把握にする方法がわかりません。どのように私はそれをやって行くのでしょうか？

また、私は、私はすでに<li>のidを標的とすることによりZインデックスを設定しておりますので、クラスを追加しても問題が解決するかどうかわかりません。たぶん私はそれがIDのCSSを上書きしますので、現在、プッシュボタンのインラインCSSに影響を与える必要があり、またそれが自分を削除することができますので、「999」にインラインCSSのZインデックスが設定されている他の二つのどちらかを確認しなければなりませんインラインCSSとは、他の2つのボタンよりも大きいz屈折率を有し、上部に表示される

Answer 1

少しさらにコビの答えを取ること。私はULの李（s）は、いくつかの一般的なクラス可能な場合またはIDを与えるだろう。

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

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

あなたはIDに基づいてZインデックスを設定している場合は、IDのための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--;
 })
})