Intento crear una clase de javascript para acercar y alejar algunas imágenes. Pero todas las imágenes de la página se acercan y se alejan. Creo que es un problema de bucle de javascript, pero no puedo hacerlo. Esta es mi clase, ¿alguien ve el problema?
imagen de clase {
constructor() { this.ip = document.getElementsByClassName("image_petite"); this.images = []; } agrandir() { for (let i=0; i < this.ip.length; i++) { this.images.push(this.ip[i]); }; console.log(this.images); for (let j=0; j < this.images.length; j++) { if (this.images[j].classList == "image_petite") { this.images[j].classList.remove('image_petite'); this.images[j].classList.add('image_grande'); } else if (this.images[j].classList == "image_grande") { this.images[j].classList.remove('image_grande'); this.images[j].classList.add('image_petite'); } } }}
let image = new Image();this.images[j].classList == "image_petite" no es la forma de verificar si un elemento tiene una clase. En su lugar, utiliza contains :
if (this.images[j].classList.contains("image_petite")) { // ... } Sin embargo, por separado, ha utilizado un bucle, que intencionalmente procesa todo en la matriz this.images . Es difícil decir qué debe hacer en su lugar sin saber cómo se ve la estructura DOM (más o menos, el HTML), pero si está tratando de manejar el cambio de tamaño de una imagen, deberá identificar la imagen que desea cambiar de tamaño, que nada en ese código lo hace.
Aquí hay un ejemplo simple usando un controlador de click :
// This example uses event delegation document.body.addEventListener("click", event => { const image = event.target.closest("img"); if (image && event.currentTarget.contains(image)) { // This is the image to enlarge or toggle if (image.classList.contains("image_grand")) { // Toggling it from big back to small image.classList.remove("image_grand"); image.classList.add("image_petite"); } else { // Making this the one big one const big = document.querySelector(".image_grand"); if (big) { // Make the current big one small again big.classList.remove("image_grand"); big.classList.add("image_petite"); } // Make this one big image.classList.add("image_grand"); image.classList.remove("image_petite"); } } }); .image_petite { width: 75px; height: 75px; } .image_grand { width: 150px; height: 150px; } <div> <img class="image_petite" src="https://via.placeholder.com/150/0000FF/808080 ?text=1"> </div> <div> <img class="image_petite" src="https://via.placeholder.com/150/0000FF/808080 ?text=2"> </div> <div> <img class="image_petite" src="https://via.placeholder.com/150/0000FF/808080 ?text=3"> </div>Dicho esto, creo que usaría solo una clase y agregaría o eliminaría esa clase, en lugar de dos clases.