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

Question

[JsNoobUser]

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

$select.forEach(item => {
        item.addEventListener('click', function() {
            item.classList.remove('_select--opened')
            this.classList.toggle('_select--opened')
        })
    })

Comments

[Сергей Соколов]

как получаете $select?

[JsNoobUser]

Сергей Соколов, const $select = document.querySelectorAll('._select')

Answer 1

[Сергей delphinpro]

$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');
  });
})

Comments

[Сергей Соколов]

отчего всем подряд не отключить класс, а this'у его включить?

[JsNoobUser]

Uncaught TypeError: $select.filter is not a function такая ошибка

[Stalker_RED]

JsNoobUser, а что у вас в $select?

[JsNoobUser]

Stalker_RED, const $select = document.querySelectorAll('._select')

[Сергей delphinpro]

JsNoobUser, а что у вас там в $select? Это выборка jquery или NodeList?

[Сергей delphinpro]

Если NodeList, то Array.from($select).filter
Если jquery, то используйте тот же forEach.

Смысл в том, что вы перебираете все элементы, кроме кликнутого и убираете у них класс. Вместо фильтра можно использовать сравнение в цикле forEach.

[JsNoobUser]

Сергей delphinpro, each это же вроде из jquery? Uncaught TypeError: Array.from(...).filter(...).each is not a function

[Сергей delphinpro]

JsNoobUser, да =) forEach там нужен

[Сергей Соколов]

Сергей delphinpro не в тему вопроса, как эта git'овская подсветка изменений работает? Просто + / – в начале строки кода?

[Сергей delphinpro]

Сергей Соколов, да, и в списке подсветок выбрать Diff

Answer 2

[Сергей Соколов]

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));

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

фиддл

Comments

[JsNoobUser]

У элемента по которому нажимаем класс должен не просто добавляться, а переключатся(toggle)

[Сергей Соколов]

JsNoobUser, это точно нужно? Для единственного выбранного элемента это не требуется.

[JsNoobUser]

Сергей Соколов, при добавлении класса у меня выпадающий список появляется, я бы хотел при повторном нажатии удалять класс, чтобы скрыть список

[Сергей Соколов]

JsNoobUser, обновил. Перед отключением света у всех, проверяется, был ли включён свет у кликнутого )