根据条件添加或删除类

Question

我根据一个变量的真伪，在元素的 classList 中添加/删除一个类。然而，我的方法似乎有点晦涩：

if (myConditionIsMet) {
  myEl.classList.add("myClass");
} else {
  myEl.classList.remove("myClass");
}

有没有一种方法可以让这个更加动感，比如使用条件运算符来动态调用add / remove链接函数：

myEl.classList.{myConditionIsMet ? add('myClass') : remove('myClass')};

以上当然是伪代码，我希望尽可能使用纯JS。

- physicsboy

---

我知道toggle，但我不知道它也可以使用布尔值！看起来这可能会有用 :-) - physicsboy

这个回答解决了你的问题吗？如何动态设置JavaScript对象值？ - Thomas Sablik

使用jQuery也可以实现同样的效果: 如何更简洁地使用'hasClass'来检查添加/移除CSS类？。 - Sebastian Simon

如何在Javascript中调用动态命名的方法？ - Thomas Sablik

Answer 1

在.classList上有一个toggle方法，它带有第二个参数(force)。 这个布尔类型的参数本质上接受一个条件，如果为真，则添加类，如果为假，则删除类。

myEl.classList.toggle("myClass", myConditionIsMet);

- Sebastian Simon

Answer 2

您的JS伪代码

myEl.classList.{myConditionIsMet ? add('myClass') : remove('myClass')};

可以被翻译成实际的JavaScript代码。

myEl.classList[myConditionIsMet ? 'add' : 'remove']('myClass');

这段代码可能不太易读，但实现了你所描述的功能。

为了增加可读性，可以使用toggle方法。

- edo.n