javascript - 有没有办法用三元运算符在 html 元素中切换 css 类？

Question

每次单击列表项时，我都会尝试在列表项上添加一些 css 类。例如，我有菜单，如果它被选中，我需要将“事件”类放入菜单项。是否可以使用三元运算符？

我试图将它添加到列表中的类属性中，但它似乎不起作用。

这是我试过的:

<li class="regular (('active') ? 'regular' : 'regular active')">Home</li>

我希望“事件”类在被选中时添加到列表中，但它不起作用。

Answer 1

您应该绑定(bind)一个点击处理程序，并在该点击处理程序中打开/关闭“事件”类:

document.querySelector("li").addEventListener("click", function () {
    this.classList.toggle("active");
});

li.active { background: yellow; }

<ul>
    <li class="regular">Home</li>
</ul>

当你有多个这样的 li 元素时:

for (const li of document.querySelectorAll("li")) {
    li.addEventListener("click", function () {
        this.classList.toggle("active");
    });
}

li.active { background: yellow; }

<ul>
    <li class="regular">Home</li>
    <li class="regular">Other</li>
</ul>

如果“active”类一次只能存在于一个 li 上，那么:

for (const li of document.querySelectorAll("li")) {
    li.addEventListener("click", function () {
        const active = document.querySelector("li.active");
        this.classList.toggle("active");
        if (active && this !== active) active.classList.toggle("active");
    });
}

li.active { background: yellow; }

<ul>
    <li class="regular">Home</li>
    <li class="regular">Other</li>
</ul>