javascript - LI クリックでクラスを変更

Question

CSS クラスを変更できるように、クリックした要素に .selected クラスを動的に割り当て、クリックした要素に割り当てられていた他の以前のクラスを削除する必要があります。多分このコード：

$(this).click(function(){
  $(this).addClass('selected');
});

動作しますが、他の LI をクリックするとどうなりますか? この仕事を得るために何か助けはありますか？

編集:わかりました、このコードを参照してください:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

デフォルトではクラスはありませんが、項目 2 をクリックすると、HTML は次のように変換されます。

<ul>
  <li>Item 1</li>
  <li class="selected">Item 2</li>
  <li>Item 3</li>
</ul>

しかし、もう一度項目 3 をクリックすると、HTML は次のように変換されます。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="selected">Item 3</li>
</ul>

これが私がやろうとしていることです

score 4 · Accepted Answer

私はお勧めします：

$(selector).click(function(){
  $('.selected').removeClass('selected');
  $(this).addClass('selected');
});

moonwave99 が残したコメント (以下) に関してselected、同じ要素内に含まれる要素からクラス名のみを削除したい場合parent:

$(selector).click(function(){
  var that = $(this);
  that.parent().find('.selected').removeClass('selected');
  that.addClass('selected');
});

ただし、クリックしている要素と親が何であるかを覚えておくことは価値があります。たとえば、a次の HTMLのをクリックします。

<ul>
    <li><a href="#">link text</a></li>
</ul>

内でli他の.selected要素を検索するため、次を使用する必要があります。

$(selector).click(function(){
  var that = $(this);
  that.closest('ul').find('.selected').removeClass('selected');
  that.addClass('selected');
});

score 0 · Accepted Answer

最初に ul 内のすべての li から選択したクラスを削除し、次にクリックした li にクラスを適用します。

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

3 に答える 3