1

Tengo un objeto de imagenes + tags y a este lo imprimo a través de javascript en el html. Lo que necesito es detectar a qué hijo se le hizo click para mostrar la imagen correspondiente en grande en un modal.

Encontré este ejemplo que sirve para elementos fijos pero en mi caso los estoy generando a través de una lista y cuando se trata de detectar el click en estos elementos no los detecta. Alguna idea?

for(let i = 0; i < imgBox.length; i++){
   imgBox[i].addEventListener('click', function(){
      // acción
   })
}

(En este caso imgBox sería el contenedor de cada imagen en la galeria.)

2
  • Hola, dudo mucho que puedas hacerlo de esa manera. En todo caso asigna un atributo o en HTML que sirva para poder diferenciar un imgBox de otro, de otra manera yo sí lo veo complicado, a menos que haya otra solución, saludos Commented el 28 ene. 2020 a las 18:07
  • podrias colocar el codigo completo
    – Bryro
    Commented el 28 ene. 2020 a las 18:07

1 respuesta 1

5

puedes hacerlo accediento al target del evento

ejemplo:

let wrap = document.getElementById("wrap");
let array = ["hola 1","hola 2","hola 3"];
let content = "";
// creamos elementos dinamicos
for( x of array)
 content +=`<p id="imgBox">${x}</p>`;

// agregamos al dom
wrap.innerHTML=content;


let imgBox = document.querySelectorAll("#imgBox");

for(let i = 0; i < imgBox.length; i++){
   // pasamos el evento como parametro con `e`
   imgBox[i].addEventListener('click', function(e){
     //accedemos a la propiedad target del evento
     let self = e.target
     console.log(`se le dio click a ${self.innerText}`);
   })
}
<div id="wrap"><div>

1
  • 1
    Gracias!! El último for me da lo que necesito! Necesitaba específicamente conseguir el número de posición para poder llamar al objeto[i] y así asignarle la imagen de esa posición al modal, creo que va a funcionar, cualquier cosa vuelvo a preguntar.
    – Kimi
    Commented el 29 ene. 2020 a las 13:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.