обработчик нескольких элементов
Здравствуйте, на странице динамически формируются элементы <img>
(кнопка), имеется обработчик нажатия, но срабатывает он только на первой кнопке, а необходимо на всех. Как это реализовать? <div class="text_2"> <img src="knopka.png"/> </div> <div class="all_inone"> <div class="allmodal"> <div class="forma"> <div class="image"> '.$row[1].' </div> <div class="descr"> Lorem ipsum dolor sit amet </div> <div class="descr"> Lorem </div> </div> </div> </div> <script> var btn_modal = document.querySelector(".text_2"); btn_modal.onclick = function(){ var modal_window = document.querySelector(".all_inone"); modal_window.style.display = "grid"; } var modal = document.querySelector(".all_inone"); modal.onclick = function(){ modal.style.display = "none"; } </script> |
Если динамически, то делегировать обработку ближайшему родителю существующему на странице. Есть таковой кроме тела документа?
|
Цитата:
<div class="text_block"><!--"Родитель"--> <div class="text_1"> <div class="text_1_inside"> '.'<div class="num_izd"><span> Изделие № '.$number.'</span></div>'.$row[2].' </div> </div> <div class="text_2"> <img src="knopka.png"/> </div> <div class="text_3"> </div> |
делегирование по индексу
Checksum,
addEventListener("DOMContentLoaded", function() { document.querySelector(".text_block").addEventListener("click", function(event) { const btn = event.target.closest(".text_2"); const btns = this.querySelectorAll(".text_2"); const modals = this.querySelectorAll(".all_inone"); const modal = event.target.closest(".all_inone"); if (btn) { const index = [...btns].indexOf(btn); modals[index].style.display = "grid"; } else if (modal) modal.style.display = "none"; }) }) |
laimas и рони, благодарю вас за помощь, направление ясно и понятно.
|
Часовой пояс GMT +3, время: 20:31. |