通过“添加和删除类”；香草JavaScript“；给出错误

在一个简单的例子中，我试图找到一个类是否存在，并基于它通过JS中的类“切换”的背景。代码有问题，有人能帮忙解决吗

函数alpha（）{
document.querySelector（'button'）.classList.contains（'red'））
？（document.querySelector（'button'）。addClass='blue'；document.querySelector（'button'）。removeClass='red'；）
：（document.querySelector（'button'）。addClass='red'；document.querySelector（'button'）。removeClass='blue'；）
}

.red{背景：red；}
.blue{背景：blue；}

---

ok

三值运算符中存在语法错误。您还需要使用

classList.remove

删除该类

现在它起作用了

function alpha() {
  document.querySelector('button').classList.contains('red') ? 
    (
    document.querySelector('button').classList.add("blue"),
    document.querySelector('button').classList.remove("red") 
    )
  : (
    document.querySelector('button').classList.add("red"),
    document.querySelector('button').classList.remove("blue"))
}

---

这是您要求的工作代码。请仅在使用JSX时使用三元运算符。在vanillaJS中，三元代码使代码不可读

函数alpha（）{
var节点=document.querySelector（'button'）；
if（node.classList.contains（'red'））{
node.classList.add（'blue'）；
node.classList.remove（'red'）；
}
否则{
node.classList.add（'red'）；
node.classList.remove（'blue'）；
}
}
document.getElementById（“按钮”）.addEventListener（“单击”，alpha，false）
.red{背景：red；}
.blue{背景：blue；}
ok
您可以使用
classList.add（'blue'）
和
classList.remove（'red'）
，应该可以用。@Phil-来自“react world”和JSX的习惯@gautamits-Pl您能帮助发布运行示例吗？它仍然有问题…你误用了三元运算符。改用switch或if语句之类的语句。我想做两个操作，这样| |（或运算符）就错了；这不是我的本意；返回未定义的document.querySelector（'button'）.classList.add（“蓝色”）。所以，或者说，这是你执行两件事的唯一方式。谢谢兄弟，两件事都在这里工作。但是，我有疑问：Q1
| |操作符说两个选项中的一个
那么在添加类之后，删除其他类的第二个选项如何工作？Q2
做，在三元运算符中做“；”的功
in if-else或other？| |的工作方式是，如果第一个返回任何内容，它将终止，甚至不会转到另一个部分
document.querySelector（'button'）.classList.add（“blue”）
不返回任何内容，因此它还执行| |的其他部分。这与三元运算符无关。它是关于| |的，如果| |的第一部分返回任何积极的东西，那么你永远不能使用| |执行两件事。