javascript - 在 LI click 上更改课程

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>

这就是我想要做的

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

score 0 · Accepted Answer

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

3 回答 3