Obtuve una grilla css con 25 elementos div . Cada elemento debe cambiar entre resaltado y normal cuando se hace clic en él.
Dado que cada elemento puede activarse y desactivarse individualmente, creé una variable box_state para cada uno y la configuré en false como valor inicial para que pueda configurarse en true una vez que esté activado.
Para resaltar cada elemento obtuve este bloque de código:
document.querySelector("#n_1").onclick = function() { if (box_1_state === false) { document.querySelector("#n_1").style.filter = "brightness(150%)"; box_1_state = true; } else { document.querySelector("#n_1").style.filter = "brightness(100%)"; box_1_state = false; } } n_1 es el nombre del div en el archivo html y box_1_state es la variable mencionada anteriormente.
Entonces, para que esto funcione, tengo que hacer que el código se bloquee más de 25 veces, lo que parece que podría hacerse más fácilmente. ¿Alguna sugerencia?
"is-active" const ELS_box = document.querySelectorAll(".box"); ELS_box.forEach(EL => EL.addEventListener("click", function() { this.classList.toggle("is-active"); })) .boxes { display: grid; grid-template-columns: repeat(5, 30px); grid-template-rows: repeat(5, 30px); grid-auto-flow: column; } .box { margin: 5px; background: red; } .box.is-active { filter: brightness(50%); } <div class="boxes"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>Si no desea utilizar una clase, puede almacenar su estado en un atributo personalizado :
const divs = document.querySelectorAll('div'); divs.forEach(e => { e.addEventListener('click', function() { if (e.dataset.brightened != "true") { e.style.filter = "brightness(150%)"; e.dataset.brightened = "true"; } else { e.style.filter = "brightness(100%)"; e.dataset.brightened = "false"; } }) }) div { height: 100px; width: 100px; border: 1px solid; background-color: #ededed; } <div></div> <div></div> <div></div>Un método para automatizar esto es rodear su código con un bucle y luego usar el iterador/índice del bucle para usarlo como querySelector
let numberOfDivElements = 25; let box_states = []; for (let iterator = 0; iterator < numberOfDivElements; iterator++) { // Initialize an array to store your "box states", whether true or false box_states[iterator] = false; } for (let iterator = 0; iterator < numberOfDivElements; iterator++) { let boxSelector = "#n_" + iterator; // Your example code document.querySelector(boxSelector).onclick = function() { if (box_states[iterator] === false) { document.querySelector(boxSelector).style.filter = "brightness(150%)"; box_states[iterator] = true; } else { document.querySelector(boxSelector).style.filter = "brightness(100%)"; box_states[iterator] = false; } } // End of your example code }