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

Question

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

具体来说，如何轻松拥有在 2 个 if 语句之间切换的“切换”状态。

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;
        }
    });
}

这段代码工作得很好，只是想知道其他人是否有任何其他技巧，因为我是一个初学者编码器。

Answer 1

我希望这会有所帮助，在这里我使用 dom 中的标记类来存储状态：

 let bindClick = e => e.onclick = e => e.target.classList.toggle('active'); [...document.querySelectorAll('.arrows')].forEach(bindClick)

 .arrows { border: solid; width: 50px; display: inline-block; line-height: 50px; text-align: center; font: 44px arial; margin: 10px; cursor: pointer; transition: ease-in 300ms; } .active { color: red; transform: rotate(-45deg); }

 <div class='arrows active'>1</div> <div class='arrows'>2</div> <div class='arrows'>3</div> <div class='arrows active'>4</div> <div class='arrows'>5</div> <div class='arrows'>6</div>

[...expr]是因为从document.querySelectorAll返回的NodeList上的forEach迭代没有在某些浏览器中实现......或者不久前实现

---

如果您不想使用样式来管理状态表示，这是替代方法：

 [...document.querySelectorAll('.arrows')].forEach(e => e.onclick = e => { e.target.classList.toggle('active'); let v = e.target.classList.contains('active'); e.target.style.transform = `rotate(${v ? -45 : 0}deg)`; e.target.style.color = v ? 'red' : 'black'; })

 .arrows { border: solid; width: 50px; height: 50px; display: inline-block; line-height: 50px; text-align: center; font-size: 40px; margin: 10px; cursor: pointer; }

 <div class='arrows'>1</div> <div class='arrows'>2</div> <div class='arrows'>3</div> <div class='arrows'>4</div> <div class='arrows'>5</div> <div class='arrows'>6</div>

Answer 2

首先， function switch会出错——这不需要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;
        id.style.transform = `rotate(${-90 + (state * 90)})`;
        target.style.display = id ? "grid" : "none";
        state = state ? 0 : 1;
    });
}