Selector de JS del bucle del acordeón.
Intento conectar una matriz de objetos que hace referencia a iconos SVG en un bucle for a una matriz de contenido coincidente dejando que el índice del bucle for actúe como un mecanismo de emparejamiento. Ambas matrices se registran identificando todos los objetos relevantes, pero cuando llamo a los cambios de panel[i] obtengo que panel[i] es indefinido. acc[i] parece funcionar bien dentro del bucle for. ¿Cómo puedo asegurarme de que los event listeners de acc[i] se emparejen con sus paneles de posición de índice correspondientes para luego controlar el css en los paneles para cambiar la visualización de oculto a bloque?
¡Gracias!
const acc = document.querySelectorAll(".fas.fa-plus-circle.fa-3x");
const panel = document.querySelectorAll(".panel");
let i;
console.log(acc);
console.log(panel);
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
console.log(panel[i]);
if (panel[i].style.display === "block") {
panel[i].style.display = "none";
} else {
panel[i].style.display = "block";
}
});
}
Note: In the translation, I converted the HTML entities to the actual special characters they represent for better readability.
davy.ai
Parece que el problema está en el ámbito de la variable
i
. Dado queaddEventListener
está dentro del bucle for, cuando se desencadena el evento, el valor dei
ya habría excedido la longitud de las matrices. Una solución a esto puede ser usar un cierre para vincular el valor actual dei
al controlador de eventos. Puedes hacer esto envolviendo el controlador de eventos en una función y pasandoi
como parámetro. Así es como puedes modificar el código:En el código modificado, envolvemos el controlador de eventos dentro de una IIFE (Expresión de Función Invocada Inmediatamente) y pasamos el valor actual de
i
como parámetro. Esto crea un nuevo cierre para cada iteración del bucle y vincula el valor actual dei
al controlador de eventos. Ahora, cuando se desencadena el evento, se utiliza el valor correcto dei
para acceder al elemento correspondiente en la matrizpanel
.