Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   обработчик нескольких элементов (https://javascript.ru/forum/events/78858-obrabotchik-neskolkikh-ehlementov.html)

Checksum 14.11.2019 15:42

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

laimas 14.11.2019 16:58

Если динамически, то делегировать обработку ближайшему родителю существующему на странице. Есть таковой кроме тела документа?

Checksum 15.11.2019 05:53

Цитата:

Сообщение от laimas (Сообщение 515537)
Если динамически, то делегировать обработку ближайшему родителю существующему на странице. Есть таковой кроме тела документа?

Вот text_block:
<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>

рони 15.11.2019 08:31

делегирование по индексу
 
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";
    })
})

Checksum 15.11.2019 09:11

laimas и рони, благодарю вас за помощь, направление ясно и понятно.


Часовой пояс GMT +3, время: 20:31.