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在NodeList dont implemented in some browsers...返回或不久前实现的document.querySelectorAll上进行了迭代

如果您不想使用样式来管理状态表示，则可以选择以下方法：

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

首先，int low = startIndexOfArray; // 0 Normally but can be anything int high = endIndexOfArray - 1; int mid = (low + high) >>> 1; System.out.print("Mid Value OF Array Is "+ mid);会出错-不需要function switch（无论如何都保留）。其次，您可以使用一些精美的三元组和模板文字：

switch

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

2 个答案: