DpOLEGapx
@DpOLEGapx
HTML-Верстальщик

Как удалить класс у всех соседних элементов?

Добрый день, подскажите пожалуйста как удалять класс selected по клику, у не активного пункта)
https://fiddle.jshell.net/9Lufhat3/163/

P.S JQ не предлагать, про .siblings() в курсе:)
  • Вопрос задан
  • 1809 просмотров
Решения вопроса 3
0xD34F
@0xD34F Куратор тега JavaScript
Делегируете обработку клика контейнеру.

Можно при клике искать элемент с нужным классом, снимать класс, устанавливать класс кликнутому. Типа так:

document.querySelector('nav').addEventListener('click', function(e) {
  if (e.target.classList.contains('sidebar-item')) {
    const selected = this.querySelector('.selected');
    if (selected) {
      selected.classList.remove('selected');
    }

    e.target.classList.add('selected');
  }
});

Или можно перебирать все элементы, переключая класс в зависимости от того, является ли текущий элемент кликнутым. Как-то так:

document.querySelector('nav').addEventListener('click', function({ target: t }) {
  if (t.classList.contains('sidebar-item')) {
    this.querySelectorAll('.sidebar-item').forEach(n => n.classList.toggle('selected', n === t));
  }
});
Ответ написан
Комментировать
rockon404
@rockon404
Frontend Developer
Вариант без делегирования.
Ответ написан
Комментировать
coderisimo
@coderisimo Куратор тега JavaScript
по клику на кнопке
$('.sidebar-item').removeClass('selected');
$(this).addClass('selected');


БЕЗ jQ ваш код (идея та же):
var menuItems = document.getElementsByClassName("sidebar-item");
  for (var i = 0; i < menuItems.length; i++) {
            menuItems[i].addEventListener("click", function() { 
            var x = document.getElementsByClassName("sidebar-item");
            Array.prototype.forEach.call(x, function(el) {
            el.classList.remove("selected");
});
           this.classList.add('selected');
         });
  }
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
bubandos
@bubandos
bash'у, javascript'ую, php'лю, css'аю, html'каю
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы