Каким образом поставить обработчик событий на все элементы блока с элементами partWithNav--ul--li?
Каким образом поставить обработчик событий на все элементы partWithNav--ul, чтобы при нажатии на какой то из элементов partWithNav--ul--li (их 5), менялся класс у backgroung-stripeOnTop, в зависимости от кнопки. У каждой кнопки есть функция которая будет добавлять свой класс(redBackgroundColor, toolsBackgroundColor, towerBackgroundColor, markBackgroundColor) backgroung-stripeOnTop.
Дополнительно:
и в чём проблема? обычный ul.addEventListener('click'), в обработчике которого через event.target.closest('li') искать нужный элемент
Ответы:
пусть каждая кнопка задаёт свой неповторимый класс. Задайте классы допустим button1 button2 ... . И допустим button1 добавляет redBackgroundColor1 button2 redBackgroundColor2 ... Тогда надо указать что при добавлении redBackgroundColor1, удаляется redBackgroundColor2 Допустим
element.classList.add("redBackgroundColor1"); element.classList.remove("redBackgroundColor2"); |
element.classList.add("redBackgroundColor1"); element.classList.remove("redBackgroundColor2");
Один слушатель на ul с проверкой
[ul].addEventListener('click',(ev)=>{ if(ev.target.nodeName !== "li") return; //Тут добавление классов если для каждой //отдельной кнопки нужен свой клас их надо как-то //отличить можно через дата атрибут типа: if(ev.target.dataset.attribute==="value attribute"){ //Что-то делаем } //Можно заменить if на switch case } |
[ul].addEventListener('click',(ev)=>{ if(ev.target.nodeName !== "li") return; //Тут добавление классов если для каждой //отдельной кнопки нужен свой клас их надо как-то //отличить можно через дата атрибут типа: if(ev.target.dataset.attribute==="value attribute"){ //Что-то делаем } //Можно заменить if на switch case }
Это если я правильно понимаю задание
делегирование событий
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы поставить обработчик событий на все элементы блока с элементами partWithNav-ul-li, вам необходимо использовать делегирование событий. Это позволит вам добавить обработчик событий на родительский элемент и отслеживать события на всех его потомках, включая элементы partWithNav-ul-li.
Вот пример кода на JavaScript, который показывает как это можно сделать:
// Находим родительский элемент, содержащий элементы partWithNav-ul-li var parentElement = document.querySelector('.partWithNav-ul'); // Добавляем обработчик событий на родительский элемент parentElement.addEventListener('click', function(event) { // Проверяем, что кликнули именно на элемент partWithNav-ul-li if (event.target.matches('.partWithNav-ul-li')) { // Ваш код обработки события здесь console.log('Кликнули на элемент partWithNav-ul-li'); } });
В этом примере мы находим родительский элемент с классом "partWithNav-ul" и добавляем обработчик событий на него. Затем мы проверяем, что событие произошло именно на элементе с классом "partWithNav-ul-li" и выполняем соответствующий код обработки события.
Таким образом, вы можете поставить обработчик событий на все элементы блока с элементами partWithNav-ul-li, используя делегирование событий в JavaScript.