Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.11.2019, 15:42
Интересующийся
Отправить личное сообщение для Checksum Посмотреть профиль Найти все сообщения от Checksum
 
Регистрация: 14.11.2019
Сообщений: 14

обработчик нескольких элементов
Здравствуйте, на странице динамически формируются элементы <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>
Ответить с цитированием
  #2 (permalink)  
Старый 14.11.2019, 16:58
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Если динамически, то делегировать обработку ближайшему родителю существующему на странице. Есть таковой кроме тела документа?
Ответить с цитированием
  #3 (permalink)  
Старый 15.11.2019, 05:53
Интересующийся
Отправить личное сообщение для Checksum Посмотреть профиль Найти все сообщения от Checksum
 
Регистрация: 14.11.2019
Сообщений: 14

Сообщение от laimas Посмотреть сообщение
Если динамически, то делегировать обработку ближайшему родителю существующему на странице. Есть таковой кроме тела документа?
Вот 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>
Ответить с цитированием
  #4 (permalink)  
Старый 15.11.2019, 08:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

делегирование по индексу
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";
    })
})
Ответить с цитированием
  #5 (permalink)  
Старый 15.11.2019, 09:11
Интересующийся
Отправить личное сообщение для Checksum Посмотреть профиль Найти все сообщения от Checksum
 
Регистрация: 14.11.2019
Сообщений: 14

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замыливание нескольких div-ов при наведении на один из элементов wayrus161 Элементы интерфейса 2 31.08.2018 07:20
обработчик событий для динамически добавленных элементов Tecvid Events/DOM/Window 28 25.06.2018 13:49
.position() для нескольких элементов Blizzart jQuery 4 17.09.2012 22:54
Выделение нескольких элементов zebra Элементы интерфейса 4 19.07.2012 16:14
Сложение нескольких значений элементов frolvict jQuery 2 04.12.2010 11:52