Question

我需要动态地将一个.selected类分配给我单击的元素，并删除任何其他先前的类，这些类符合被点击的元素，因此我可以更改CSS类。也许这段代码：

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

这就是我要做的事情

Answer 1

我建议：

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

虽然值得记住您点击的元素，以及父母的内容，例如，点击以下HTML中的a：

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

Answer 2

首先从ul中的所有li中删除所选的类，然后将class应用于click li。

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

Answer 3

在我的旅行中，我发现在使用引导程序时无法添加“活动”类来列出项目。因此，如果您正在阅读本文（就像我一样）想知道为什么在类名是“活动的”时这不起作用，您需要选择其他内容。