使用jQuery交换元素类

Question

我有一个元素：

...
<li class="products active"><a href="" title="Title">test</a></li>
...

我想访问此“li”标记并将“active”类交换为“past”类 所以最终结果将是：

...
<li class="products past"><a href="" title="Title">test</a></li>
...

使用jQuery实现此目的的最简单/最有效的方法是什么？

Answer 1

use toggleClass()更加简单，假设元素已经有一个或另一个。

只要给它两个类名：

$('.active').toggleClass('past active');

如果它有active（因为这是它的选择方式），它的active类将被删除，并且past类将被添加。

如果你在点击处理程序中执行此操作，它可能如下所示：

$('.products').click(function() {
    $(this).toggleClass('past active');
});

示例： http://jsfiddle.net/TCvQU/

Answer 2

$("li.active").removeClass("active").addClass("past");

Answer 3

您需要修改选择器，以便只抓取正确的li(s) ...

$('li').removeClass('active').addClass('past');

也许是$('li.active');

Answer 4

使用您当前的标记，您可以执行以下操作：

$('li.active').removeClass('active').addClass('past');

但是，如果要更改特定的列表项元素，则需要以某种方式识别它。也许是这样的：

<li class="products active" id="item1">..</li>

然后你可以这样做：

$('#item1').removeClass('active').addClass('past');

Answer 5

$('.active').addClass('past').removeClass('active')

Answer 6

我同意所有三个答案。以上是我们不知道你是在运行纯粹的JQuery还是作为CMS的一部分，可能需要更换标签。