¡No podía por mi vida resolver esto! ¿Cómo puedo hacer que esto suceda? Cuando se hace clic en la imagen, se establece la opacidad en 1 y se reduce la opacidad para otras imágenes. Me dijeron que agregara una clase a la imagen en la que se hizo clic, la almacenara y luego eliminara la clase cuando se hiciera clic en otra imagen. pero no puedo entenderlo!
let items = document.getElementsByClassName("item"); document.body.addEventListener('click', (event) => { const el = event.target; for(var i=0; i< smallImg.length; i++) { if (el.className !== 'sec') return; const wasSelected = el.classList.contains('selected'); for (const d of document.querySelectorAll('div >img')) d.classList.remove('selected'); el.classList.toggle('selected', !wasSelected) console.log(".selected"); } }); .sec:not(:first-child) { opacity: 0.3; } .sec:not:active{ opacity: 0.3; } <div class="image-container"> <img src="https://source.unsplash.com/400x400/?stationery" class="item main-image" /> <div class="secondary-image"> <img src="https://source.unsplash.com/100x100/?pen" class="item sec item-1 active " /> <img src="https://source.unsplash.com/100x100/?pencil" class="item sec item-2" /> <img src="https://source.unsplash.com/100x100/?notepad" class="item sec item-3" /> <img src="https://source.unsplash.com/100x100/?eraser" class="item sec item-4" /> </div>Simplemente seleccione el elemento que actualmente tiene la clase active , y si tal elemento existe, elimine esa clase de eso. Y luego agréguelo al que se hizo clic.
(Cualquier control sobre si el elemento en el que se hizo clic era realmente una de esas imágenes no está incluido actualmente. Simplemente mantuve su controlador de clics general para body , refine esto usted mismo para aplicarlo solo donde sea necesario).
document.body.addEventListener('click', (event) => { let el = event.target; let prev = document.querySelector('.secondary-image .active'); if(prev) { prev.classList.remove('active'); } el.classList.add('active'); }); .secondary-image .sec:not(.active) { opacity: 0.3; } <div class="image-container"> <img src="https://source.unsplash.com/400x400/?stationery" class="item main-image" /> <div class="secondary-image"> <img src="https://source.unsplash.com/100x100/?pen" class="item sec item-1 active " /> <img src="https://source.unsplash.com/100x100/?pencil" class="item sec item-2" /> <img src="https://source.unsplash.com/100x100/?notepad" class="item sec item-3" /> <img src="https://source.unsplash.com/100x100/?eraser" class="item sec item-4" /> </div>