JavaScript: почему не срабатывает скрипт?

Question

[Shimpanze]

Добрый день!

Необходимо при наведении на элемент коллекции, всем его элементам присвоить класс «nozoomed», а конкретно элементу на который наведена мышь класс «zoomed».

Делаю так:

// Получаю все нужные элементы
[].forEach.call(
  // Привязываю перебор элементов коллекции с событию «mouseover»
  document.querySelectorAll('nav#menu_3 > ul > li').addEventListener('mouseover', function(e) {
    // Для всех элементов задаю класс «nozoomed»
    e.classList.add('nozoomed');
    // Для элемента на который наведена мышь задаю класс «zoomed»
    this.classList.add('zoomed');
  });
);

Не работает. Скажите, пожалуйста, в чем ошибка?

Comments

[ThunderCat]

есть такая штука https://jsfiddle.net/ , как раз что бы показать что у вас не работает

Answer 1

[0xD34F]

• Метод querySelectorAll возвращает коллекцию элементов, никакого addEventListener у неё нет - его надо вызывать отдельно у каждого элемента.
  
• Что ещё за e.classList? e - это объект события, а не элемент DOM-дерева.
  
• Класс добавляете, OK - а где же удаление? Вряд ли вам нужно, чтобы элементы могли иметь оба класса одновременно.
  

Насколько я понял, вам нужно нечто такое:

const elems = document.querySelectorAll('nav#menu_3 > ul > li');

elems.forEach(n => n.addEventListener('mouseover', onMouseover));

function onMouseover() {
  elems.forEach(n => {
    n.classList.toggle('zoomed', this === n);
    n.classList.toggle('nozoomed', this !== n);
  });
}

Comments

[Shimpanze]

Совершенно точно! Благодарю Вас!