Я хочу создать функцию js, которая извлекает каждый элемент из div и активирует для него блок CSS

#javascript #html #css

Вопрос:

Я хотел сделать эту функцию с помощью flask, но, по-видимому, вы можете сделать это только с помощью js, и я делаю это впервые. Код:

 const navSlide2 = () =gt; {  const burger = document.querySelector('.burger');  const nav = document.querySelectorAll('.test');   burger.addEventListener('click',()=gt;{  nav.classList.toggle('heading-nav-active');  }); }

Я хочу, чтобы все элементы с классом «тест» были выбраны, и для каждого выбранного элемента должна быть применена функция «heading-nav-active» в файле CSS. Как я могу это сделать?

1. querySelectorAll возвращает список узлов, подобный массиву, поэтому вам нужно выполнить итерацию по нему и изменить класс для каждого элемента. Вы можете использовать forEach .

2. Используйте navs вместо этого, а затем navs.forEach(nav =gt; nav.classList.toggle('heading-nav-active')); внутри обработчика щелчков.

Ответ №1:

Как упоминал @Andy, queryselectorAll возвращает список узлов, и вам нужно повторить его и добавить/переключить необходимый класс. Вы можете сделать, как показано ниже

 const navSlide2 = () =gt; {  const burger = document.querySelector('.burger');  const navs = document.querySelectorAll('.test');   burger.addEventListener('click', () =gt; {  navs.forEach(el =gt; el.classList.toggle('heading-nav-active'));  }); }

Спасибо @ChrisG за упоминание соглашения об именах.