Какой был бы лучший способ написать код состояния переключения 2 в JavaScript?

#javascript

Вопрос:

Итак, я пишу некоторый код для веб-сайта, который я реализовал, который представляет собой простую функцию скрытия / показа. И я думал о том, как я могу написать этот или подобный код короче, лаконичнее или эффективнее.

Если быть точным, как легко создать состояние «переключения», которое переключается между 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;
        }
    });
}

Этот код работает отлично, просто интересно, есть ли у других какие-либо другие трюки, поскольку я начинающий программист.

1. function switch приведет к Uncaught SyntaxError: Unexpected token switch

2. где вы устанавливаете showState ?

3. Рассматривали ли вы возможность использования <details> и <summary> ?

4. Рассмотрим jsfiddle.net/h65mo7nc — используйте логическое значение и более значимое имя, чем state , выполните итерацию с forEach , переключите логическое значение вне if / else (и отбросьте function switch )

5. @NiettheDarkAbsol о, вау, это действительно круто, я не знал, что это существует. Я с удовольствием сохраню эту ссылку, спасибо!

Ответ №1:

Я надеюсь, что это поможет, здесь я использую класс marker в 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 , возвращенная из 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>

1. Вы не выполняете преобразование отображения, поэтому не используйте .map для простой итерации используйте .forEach .

2. @VLAZ я знаю, но автор просит более короткое решение =)

3. Вы играете в гольф или пишете код, который должны использовать другие?

4. @VLAZ вы правы, я должен исправить свой ответ, спасибо

5. @FrankPettersson да, это параметр css transition: 300ms

Ответ №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;
    });
}