Как средствами JavaScript переключать два состояния (класса) объекта?

Question

[meridbt]

Добрый день.

Допустим, есть div класса .lamp. В зависимости от состояния лампы нужно отрисовать либо горящую лампу, либо не горящую.

Для этого создаю 2 класса .active и .neutral. Скриптом проверяю className и если есть противоположное состояние, заменяю его нужным. Есть ли более правильный путь?

Comments

[n1ksON]

не думаю, что в данном случае могут быть "правильное" и "неправильное" решения

[Дмитрий Беляев]

А обязательно 2 класса состояния?
Просто если нейтральное состояние описать так же внутри .lamp а в .lamp.active его переопределить, то достаточно будет classList.toggle('active')

[Евгений]

А не проще классну .lamp задать стили .neutral, и при клике проверять только наличие .active класса?)

[Максим]

Просто так сделал - на скрол вниз - будет белое а вверх чёрное

[meridbt]

Дмитрий Беляев, спасибо, Ваш совет помог!

[meridbt]

Евгений, спасибо

[meridbt]

Максим Ленский, спасибо

[lugindev]

Answer 1

[Onzabr]

Если состояний всего 2, как в вашем случае, то лучше использовать один класс и проверять на его наличие (если класс active присутствует - лампа горит, если нет, соответственно, не горит). Для переключения лучше использовать classList.toggle
element.classList.toggle("active");

Comments

[meridbt]

спасибо, Ваш совет помог