Tengo una lista de imágenes en el archivo de índice de la siguiente manera:
<div id="image-list" <ul> <li data-id='1'> <img src='image/001.jpg' alt=''> </li> <li data-id='2'> <img src='image/002.jpg' alt=''> </li> <li data-id='3'> <img src='image/003.jpg' alt=''> </li> </ul> </div>E hice un evento de clic para la lista de imágenes:
document.getElementById("image-list").addEventListener('click', function(){ if(document.getElementById("background").style.backgroundImage == 'url("image/001.jpg")'){ console.log("I clicked in the image 001"); } if(document.getElementById("background").style.backgroundImage == 'url("image/002.jpg")'){ console.log("I clicked in the image 002"); } if(document.getElementById("background").style.backgroundImage == 'url("image/003.jpg")'){ console.log("I clicked in the image 003"); } });Pero tengo un problema al cargar la URL incorrecta. Cuando estoy en la imagen 001 y hago clic en la imagen 002, la función anterior muestra el registro "Hice clic en la imagen 001" en lugar de "Hice clic en la imagen 002" como esperaba.
Cualquiera puede ayudarme a dar una función correcta que cuando hago clic en la imagen 002, el registro de la consola imprime "Hice clic en la imagen 002" como esperaba. Gracias.
Debe apuntar a todas las imágenes, luego recorrerlas y adjuntar el evento. Dentro de la función del controlador de eventos, obtenga el atributo src y haga coincidir eso.
Manifestación:
document.querySelectorAll("#image-list ul > li > img").forEach(function(el){ el.addEventListener('click', function(){ var src = this.getAttribute('src'); if(src == "image/001.jpg"){ console.log("I clicked in the image 001"); } else if(src == "image/002.jpg"){ console.log("I clicked in the image 002"); } else if(src == "image/003.jpg"){ console.log("I clicked in the image 003"); } }); }); <div id="image-list"> <ul> <li data-id='1'> <img src='image/001.jpg' alt='11'> </li> <li data-id='2'> <img src='image/002.jpg' alt='22'> </li> <li data-id='3'> <img src='image/003.jpg' alt='33'> </li> </ul> </div>