根据条件添加或删除类

Question

我正在根据变量的真实性从元素的classList添加/删除一个类。然而，我正在用一种看起来很迟钝的方式做这件事:

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

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

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

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

Answer 1

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

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

Answer 2

你的伪代码js

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

可以翻译成实际的js

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

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

为了便于阅读，我会使用toggle方法。