@JsNoobUser

Как правильно переключать классы?

При клике на элемент у него должен переключатся класс, у других таких же элементов класс должен удаляться

$select.forEach(item => {
        item.addEventListener('click', function() {
            item.classList.remove('_select--opened')
            this.classList.toggle('_select--opened')
        })
    })
  • Вопрос задан
  • 100 просмотров
Решения вопроса 2
delphinpro
@delphinpro
frontend developer
$select.forEach(item => {
  item.addEventListener('click', function () {
    $select.filter(i => i !== item).each(i => i.classList.remove('_select--opened'));
    this.classList.toggle('_select--opened');
  });
});


UPD
$select.forEach(item => {
  item.addEventListener('click', function () {
-   $select.filter(i => i !== item).each(i => i.classList.remove('_select--opened'));
+   Aray.from($select).filter(i => i !== item).forEach(i => i.classList.remove('_select--opened'));
    this.classList.toggle('_select--opened');
  });
})
Ответ написан
sergiks
@sergiks Куратор тега JavaScript
♬♬
const onClick = (event) => {
  const className = '_select--opened';
  const etClassList = event.target.classList;
  const is_on = etClassList.contains(className); // уже был включён?
  $select.forEach((el) => el.classList.remove(className)); // всем убрать
  if (! is_on) etClassList.add(className); // кликнутому поставить
}

$select.forEach((el) => el.addEventListener('click', onClick));


Рабочий пример

фиддл
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Витебск
от 2 800 до 3 300 $