javascript - 在LI上更改类(class)，请点击

我需要为单击的元素动态分配一个.selected类，还要删除分配给clicked元素的所有其他先前的类，以便更改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>

这就是我想要做的

最佳答案

我建议：

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