Estoy tratando de almacenar el nodo anterior del event.currentTarget en una variable para aplicar un estilo al nodo anterior y otro al nodo actual, pero hasta ahora no he encontrado la manera.
A continuación, encontrará el código que estoy tratando de escribir pero no parece almacenar la variable como el objetivo anterior
questionsArray.map((question) => { if (Object.values(question).includes(true) == true) { let previousTarget = e.currentTarget console.log(previousTarget) e.previousTarget.className = "qgroup red"; e.currentTarget.className = "qgroup blue"; } })Llamar a una variable previousTarget no lo hace así. Tal como está, este es solo otro nombre para currentTarget . Mueva el objetivo previousTarget fuera del controlador y solo asígnele el objetivo currentTarget al final del controlador.
previousTarget no estará definido en el primer clic, así que asegúrese de manejar eso.
let prevTarget = null; for (const div of [...document.querySelectorAll(".box")]) { div.addEventListener("click", event => { if (prevTarget) { prevTarget.classList.remove("blue"); prevTarget.classList.add("red"); } event.currentTarget.classList.add("blue"); prevTarget = event.currentTarget; }); } .box { width: 50px; height: 50px; border: 1px solid black; display: inline-block; cursor: pointer; } .red { background-color: red; } .blue { background-color: blue; } <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div>Si desea que el anterior anterior vuelva al estado predeterminado, también puede hacerlo:
let prevTarget = null; let prevPrevTarget = null; for (const div of [...document.querySelectorAll(".box")]) { div.addEventListener("click", event => { if (prevPrevTarget) { prevPrevTarget.classList.remove("red"); } if (prevTarget) { prevTarget.classList.remove("blue"); prevTarget.classList.add("red"); } event.currentTarget.classList.add("blue"); prevPrevTarget = prevTarget; prevTarget = event.currentTarget; }); } .box { width: 50px; height: 50px; border: 1px solid black; display: inline-block; cursor: pointer; } .red { background-color: red; } .blue { background-color: blue; } <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div>