Me gustaría crear una función que tome una serie de imágenes, verifique si se ha hecho clic en una imagen. Si se hace clic en una imagen, se amplía la imagen, si se vuelve a hacer clic en la misma imagen, se alejará de la imagen.
esto es lo que he escrito
let imagesArr = document.querySelectorAll('img') let isZoomed = false; function rotateImage (e,isZoomed) { isZoomed = false ? e.forEach(function(item) { item.addEventListener('click', (event) => { item.style.transform = "scale(1.5)"; event.stopImmediatePropagation(); }) }) : e.forEach(function(item) { item.addEventListener('click', (event) => { item.style.transform = "scale(1)"; event.stopImmediatePropagation(); }) }) isZoomed = true; } rotateImage(imagesArr,isZoomed);Estoy tratando de verificar si la imagen ya está ampliada (verdadero, falso) y acercar/alejar según esta condición. No obtengo un error, pero mi función no funciona (no sucede nada cuando hago clic en una imagen)
Puede agregar un detector de eventos en la imagen que desea ampliar al hacer clic, y luego en el detector de eventos puede agregar una propiedad de estilo para esa imagen particular.
document.getElementById('container').addEventListener('click', function(e) { const tgt = e.target; tgt.classList.toggle('zoomed') }) #container img.zoomed { transform: scale(1.5); } <div id="container"> <img src="https://assets.stickpng.com/images/58afd6b70187e59a7d8a8f1c.png" /> <img src="https://assets.stickpng.com/images/58afd6b70187e59a7d8a8f1c.png" /> <img src="https://assets.stickpng.com/images/58afd6b70187e59a7d8a8f1c.png" /> </div>