Как добавить обработчик событий ко всем элементам в блоке с классом partWithNav--ul--li?

Как можно установить обработчик событий на все элементы в partWithNav--ul, чтобы при нажатии на любой из элементов partWithNav--ul--li (их 5), менялся класс backgroung-stripeOnTop в зависимости от нажатой кнопки? Каждая кнопка имеет собственную функцию, которая добавляет свой класс (redBackgroundColor, toolsBackgroundColor, towerBackgroundColor, markBackgroundColor) к backgroung-stripeOnTop.
  • 23 декабря 2023 г. 15:37
Ответы на вопрос 2
Для добавления обработчика событий ко всем элементам в блоке с классом partWithNav--ul--li можно использовать метод `addEventListener`.

Примерный код для добавления обработчика на каждый элемент в блоке partWithNav--ul--li может выглядеть следующим образом:

```javascript
const ul = document.querySelector('.partWithNav--ul');

// Получаем все элементы с классом partWithNav--ul--li
const liElements = ul.querySelectorAll('.partWithNav--ul--li');

// Функция, которая будет выполняться при событии click на каждый элемент
const handleClick = (event) => {
  // Получаем класс кнопки, на которую было нажато
  const buttonClass = event.target.classList[1];

  // Удаляем все классы backgroung-stripeOnTop у родительского элемента ul
  ul.classList.remove('redBackgroundColor', 'toolsBackgroundColor', 'towerBackgroundColor', 'markBackgroundColor');

  // Добавляем соответствующий класс в зависимости от нажатой кнопки
  ul.classList.add(buttonClass);
};

// Добавляем обработчик событий на каждый элемент
liElements.forEach((element) => {
  element.addEventListener('click', handleClick);
});
```

В данном примере предполагается, что каждая кнопка имеет свой класс (redBackgroundColor, toolsBackgroundColor, towerBackgroundColor, markBackgroundColor) и эти классы применяются к родительскому элементу ul в зависимости от нажатой кнопки.
пусть каждая кнопка задаёт свой неповторимый класс. Задайте классы допустим button1 button2 ... . И допустим button1 добавляет redBackgroundColor1 button2 redBackgroundColor2 ...  Тогда надо указать что при добавлении redBackgroundColor1,   удаляется redBackgroundColor2 Допустим
Похожие вопросы