根据条件添加或删除类答案

【问题标题】：Add or remove a class based on a condition根据条件添加或删除类
【发布时间】：2021-12-07 00:39:12
【问题描述】：

我正在根据变量的真实性从元素的classList 添加/删除一个类。但是，我这样做的方式似乎很迟钝：

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

有没有一种方法可以让这更性感并动态调用 add / remove 链式函数，例如使用条件运算符，例如：

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你的伪代码 js

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

可以翻译成实际的js

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

这不是特别可读，但完全符合您的描述。

为了可读性，我会查看toggle 方法。

【讨论】：