обработчик нескольких элементов
Здравствуйте, на странице динамически формируются элементы <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, время: 04:49. |