У меня есть следующий код JavaScript, в котором я получаю элемент HTML (сетку) и дочерние элементы HTML-элемента (фотографии внутри сетки).

let Galeria = document.getElementById("CaixaGaleria");
let GaleriaPhoto = document.getElementById("CaixaGaleria").children;

Это HTML:

 <div id ="CaixaGaleria" class="gallery">
    <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="pequeno"><img src="Imagens/Filme/14.jpg"></div>
    <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="medio"><img src="Imagens/Filme/16.jpg"></div>
    <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="grande"><img src="Imagens/Filme/17.jpg"></div>
    <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="pequeno"><img src="Imagens/Filme/20.jpg"></div>
    <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="medio"><img src="Imagens/Filme/22.jpg"></div>
    <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="grande"><img src="Imagens/Filme/27.jpg"></div>
    <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="pequeno"><img src="Imagens/Filme/37.jpg"></div>
    <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="medio"><img src="Imagens/Filme/42.jpg"></div>
    <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="grande"><img src="Imagens/Filme/53.jpg"></div>
  </div>

Моя цель - добавить EventListener к дочерним элементам, чтобы при нажатии на них изображение отображалось с исходным размером и соотношением сторон, примерно так:

GaleriaPhoto.addEventListener("click" , function(){
    *this function should display image's original size on a new window or popup*
 }
  );

Однако я не могу добавить ни EventListener к этому элементу, ни ForEach () или push ().

Я всегда получаю сообщение об ошибке типа «TypeError: GaleriaPhoto.addEventListener не является функцией».

Я могу сделать это с первой переменной, но не со второй, поэтому я предполагаю, что проблема связана с тем, что это сборник HTML?

0
izzypt 10 Ноя 2020 в 15:20

3 ответа

Лучший ответ

Вам нужно выполнить итерацию по каждому дочернему узлу и применить прослушиватель событий, .children возвращает тип сбора, называемый HTMLCollection (который не имеет функции .addEventListener), а не сам узел html (который имеет). Но вы можете перебирать его, как обычный массив.

Так что-то вроде

<div id ="CaixaGaleria" class="gallery">
  <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="pequeno"><img src="Imagens/Filme/14.jpg"></div>
  <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="medio"><img src="Imagens/Filme/16.jpg"></div>
  <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="grande"><img src="Imagens/Filme/17.jpg"></div>
  <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="pequeno"><img src="Imagens/Filme/20.jpg"></div>
  <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="medio"><img src="Imagens/Filme/22.jpg"></div>
  <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="grande"><img src="Imagens/Filme/27.jpg"></div>
  <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="pequeno"><img src="Imagens/Filme/37.jpg"></div>
  <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="medio"><img src="Imagens/Filme/42.jpg"></div>
  <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="grande"><img src="Imagens/Filme/53.jpg"></div>
</div>
<script>
  let Galeria = document.getElementById("CaixaGaleria");
  let GaleriaPhotos = document.getElementById("CaixaGaleria").children;
  for(let x = 0; x < GaleriaPhotos.length; x++) {
    GaleriaPhotos[x].addEventListener("click" , function(){
        alert("blah");
      }
    );
  }
</script>
1
ZombieTfk 10 Ноя 2020 в 12:39

Добавьте событие клика для каждого дочернего элемента и вызовите один и тот же обработчик с другим параметром. как это,

<html>
 <div class="gallery">
    <div onclick="handleClick('Imagens/Filme/14.jpg')" data-tecnica="lapis" data-estilo="retrato" data-tamanho="pequeno"><img src="Imagens/Filme/14.jpg"></div>

  </div>
</html>

<script>
 function handleClick(url){
    // handle url
 }
</script>
0
HKR 10 Ноя 2020 в 12:41

Вы также можете добавить прослушиватель событий в галерею, а затем использовать event.target для получения информации о выбранном элементе. Это дает преимущество обработки динамически добавляемых элементов без необходимости повторной привязки прослушивателей событий.

Обратите внимание, что в этом примере целью являются изображения, а не блоки div.

let gallery  = document.getElementById("CaixaGaleria");
gallery.addEventListener("click", function(event){
  console.log(event.target);
  //Your logic to display image here
  //Demo
  alert("src = " +event.target.src);
})
<div id="CaixaGaleria" class="gallery">
  <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="pequeno"><img src="Imagens/Filme/14.jpg"></div>
  <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="medio"><img src="Imagens/Filme/16.jpg"></div>
  <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="grande"><img src="Imagens/Filme/17.jpg"></div>
  <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="pequeno"><img src="Imagens/Filme/20.jpg"></div>
  <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="medio"><img src="Imagens/Filme/22.jpg"></div>
  <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="grande"><img src="Imagens/Filme/27.jpg"></div>
  <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="pequeno"><img src="Imagens/Filme/37.jpg"></div>
  <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="medio"><img src="Imagens/Filme/42.jpg"></div>
  <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="grande"><img src="Imagens/Filme/53.jpg"></div>
</div>
1
Jon P 10 Ноя 2020 в 12:42