toggleClass和addClass的区别

Question

我正在使用jQuery尝试在选择表格行时向表格添加一个类。

最初，我使用以下代码 -

$(this).parents("tr").toggleClass("over", this.clicked);            

因为某些原因，这在已经分配了类的某些情况下无法正常工作。 在进行任何疯狂的故障排除之前，我将其更改为以下内容-

$(this).parents("tr").addClass("over", this.clicked);           

这个新选项似乎运行良好。

我的问题是，上面的一个选项是否比另一个更好……我应该使用toggleClass而不是addClass，或者addClass已经足够了吗？

谢谢任何想法。

- czuroski

Answer 1

addClass 的作用很简单，就是将类添加到元素中。

而另一方面，toggleClass 的作用则不同，它会切换类的状态，如果该类已存在，则移除它；否则添加该类。而且，你还可以选择传入一个布尔值（true/false）来决定是添加对象（true），还是移除对象（false）。

当 this.clicked 为 false 时，toggleClass 可能无法按预期工作。对于 addClass 中传入的参数并没有影响，因为它总是会添加该类。

结论：

使用 toggleClass 切换类的状态，使用 addClass 添加类。

- Andreas Eriksson

Answer 2

如果addClass对你有效，那么你应该坚持使用它。这两种方法的用途不同。addClass确保元素上存在特定的类，而toggleClass如果不存在则添加类，如果存在则删除类。

请查看API参考以获取每种方法的完整说明：

• http://api.jquery.com/toggleClass/
• http://api.jquery.com/addClass/

- FishBasketGordo

Answer 3

在使用.addClass()时，不需要传递第二个参数 - 它会始终添加类。

如果这是您想要的行为，那么这就是正确的方法。

- N3dst4

---

谢谢您提到第二个参数是不必要的...我将其删除后，它正常工作了。 - czuroski

Answer 4

其实这取决于情况。如果您不打算删除类，则我建议使用 addClass。自然地，toggleClass 允许您切换类。

- Tim S.

---

我正在逐行删除表中所有行的特定类，然后将其添加到所选行上。因此，我认为仅使用addClass就能完全达到我所需的效果。谢谢。 - czuroski