用JavaScript编写切换2状态代码的更好方法是什么？

因此，我正在为一个我已经实现的网站编写一些代码，这是一个简单的隐藏/显示功能。我一直在思考如何将这段或类似的代码写得更短、更简洁或更高效

具体来说，如何轻松地在两个if语句之间切换“switch”状态

let selectedArrow = document.getElementsByClassName('arrows');
let state = 0;
for (let i = 0; i < selectedArrow.length; i++) {
    selectedArrow[i].addEventListener('click', function() {
        let id = event.target;
        let target = event.target.parentElement.nextElementSibling;
        if(state === 0) {
            id.style.transform = 'rotate(-90deg)'
            target.style.display = 'none';
            state = 1;
        } else if(state === 1) {
            id.style.transform = 'rotate(0deg)'
            target.style.display = 'grid';
            state = 0;
        }
    });
}

让selectedArrow=document.getElementsByClassName（'arrows'）；
设状态=0；
for（设i=0；i

---

这段代码运行得非常好，只是想知道其他人是否还有其他技巧，因为我是一名初学者。

首先，

功能开关将出错-这不需要
开关（它是保留的）。其次，您可以使用一些奇特的ternaries和模板文本：

let selectedArrow = document.getElementsByClassName('arrows');
let state = 0;
for (let i = 0; i < selectedArrow.length; i++) {
    selectedArrow[i].addEventListener('click', function() {
        let id = event.target;
        let target = event.target.parentElement.nextElementSibling;
        id.style.transform = `rotate(${-90 + (state * 90)})`;
        target.style.display = id ? "grid" : "none";
        state = state ? 0 : 1;
    });
}

让selectedArrow=document.getElementsByClassName（'arrows'）；
设状态=0；
for（设i=0；i
我希望这有帮助，在这里我使用dom中的marker类来存储状态：


let bindClick=e=>e.onclick=e=>e.target.classList.toggle（'active'）；
[…document.querySelectorAll（'.arrows'）].forEach（bindClick）
.arrows{
边框：实心；
宽度：50px；
显示：内联块；
线高：50px；
文本对齐：居中；
字体：44px arial；
利润率：10px；
光标：指针；
过渡：在300毫秒内缓解；
}
.主动{
颜色：红色；
变换：旋转（-45度）；
}
123
4、5、6、<代码> >函数开关< /代码>将引发<代码> UnthSytRealError：意外令牌开关 >您在哪里设置<代码> StActS/<代码>？是否考虑使用？考虑-使用布尔和更有意义的名称而不是<代码>状态< /代码>，重复使用<代码>前缀 >在
if
/
else
（并放下
功能开关
）之外切换布尔值@NiettheDarkAbsol噢，哇，那真是太酷了，我不知道它存在。我将很高兴地保存该链接，谢谢！您没有进行映射转换，因此不要使用
.map
进行简单的迭代，请使用
.forEach
@VLAZ我知道，但作者要求更短的解决方案=）您是在打高尔夫还是编写其他人应该使用的代码？@VLAZ您是对的，我必须更正我的答案， thanks@FrankPettersson是的，它是css参数
转换：300毫秒
-90+（状态*90）
清晰如泥。如果要使用模板文本，至少要执行一些逻辑操作，比如
state？0:-90