javascript - 用 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] 被使用是因为 forEach 迭代从 document.querySelectorAll 返回的 NodeList dont implemented in some browsers...或不久前实现

---

如果您不想使用样式来管理状态表示，这里有一个替代方案:

[...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>