Tengo una cuadrícula de imágenes en divs. Quiero que funcione como una casilla de verificación donde presionas la imagen y desaparece, presionas nuevamente y aparece. Tengo un código que funciona, pero no puedo encontrar la manera de recorrer todas las imágenes.
<aside id="goalBox"> <span class="goalBoxes" class="gridBoxes" id="goalOne"> <img id="imageBoxOne" src="images/flameV2.png" alt="flaming checkmark" class="flamingCheckmark" /> </span> <span class="goalBoxes" class="gridBoxes" id="goalTwo"> <img id="imageBoxTwo" src="images/flameV2.png" alt="flaming checkmark" class="flamingCheckmark" /> </span> <span class="goalBoxes" class="gridBoxes" id="goalThree"> <img id="imageBoxThree" src="images/flameV2.png" alt="flaming checkmark" class="flamingCheckmark" /> </span> <span class="goalBoxes" class="gridBoxes" id="goalFour"> <img id="imageBoxFour" src="images/flameV2.png" alt="flaming checkmark" class="flamingCheckmark" /> </span> <span class="goalBoxes" class="gridBoxes" id="goalFive"> <img id="imageBoxFive" src="images/flameV2.png" alt="flaming checkmark" class="flamingCheckmark" /> </span> <span class="goalBoxes" class="gridBoxes" id="goalSix"> <img id="imageBoxSix" src="images/flameV2.png" alt="flaming checkmark" class="flamingCheckmark" /> </span> </aside>Hice este código y lo hice funcionar para uno
function testFunc() { let image = document.getElementById("imageBoxOne").style.visibility console.log(image) if (image == "hidden") { document.getElementById("imageBoxOne").style.visibility = "visible" } else { document.getElementById("imageBoxOne").style.visibility = "hidden"; } console.log('success') } document.querySelector('#goalOne').addEventListener('click', testFunc);Para obtener todos sus nodos .goalBoxes , puede usar querySelectorAll . Devolverá un objeto tipo Array con todos los nodos coincidentes. Luego puede iterar sobre ellos usando forEach :
const goalBoxes = document.querySelectorAll(".goalBoxes"); goalBoxes.forEach(node => { node.addEventListener('click', () => testFunc(node)); }); De esta manera, cada nodo .goalBox llamará a testFunc cuando se haga clic.
El problema con eso es que testFunc está codificado para un elemento específico. Una forma de cambiar eso es cambiando testFunc para que funcione para cualquier elemento pasado:
function testFunc(goalBox) { let image = goalBox.children[0].style.visibility console.log(image) if (image == "hidden") { goalBox.children[0].style.visibility = "visible" } else { goalBox.children[0].style.visibility = "hidden"; } console.log('success') }De esta manera, en lugar de estar codificada para un elemento específico, la función se aplica al primer hijo (el img) del nodo GoalBox pasado a la función.
Una forma alternativa y mejor de hacer las cosas sería usar funciones anónimas y clases css.
Si tuviera que definir simplemente la clase css
.hidden { visibility: hidden; }podrías reducir el javascript a
document.querySelectorAll(".goalBoxes").forEach(node => { // get all goalBoxes and iterate over them node.addEventListener('click', () => { // apply click event listener to each goalBox node node.children[0].classList.toggle("hidden") // when clicked, toggle the "hidden" class of the first child (the img) }) })