Estoy presentando mis proyectos como flip-cards en mi portafolio. Originalmente, los datos del proyecto estaban codificados en mi index.html, las tarjetas se giran al pasar el mouse sobre una pantalla más grande y al hacer clic en pantallas más pequeñas.
Decidí mover todos los datos codificados a un objeto en mi script.js para crear dinámicamente una tarjeta invertida para cada proyecto en ese objeto. No hay problema aquí. (Además de eso, también agregué una animación de fondo de carga a las tarjetas, de modo que solo muestren su contenido después de unos segundos. Tampoco hay problema aquí).
Sin embargo, ahora que estoy creando las tarjetas invertidas para el DOM con JS, el detector de eventos adjunto a las tarjetas no funciona como solía hacerlo. El registro de las tarjetas en la consola me muestra una lista completa de nodos de todos los divs creados, pero no sucede nada al hacer clic en las tarjetas en pantallas más pequeñas.
Siento que este es un problema de alcance, pero no estoy seguro. He intentado colocar la función de escucha de eventos:
createProjectCard(projects) , justo después de crear y agregar las tarjetas invertidas: no se arroja ninguna respuesta o error, pero la lista de nodos contiene todas las tarjetas creadascreateProjectCard(projects) , justo después de la función setTimeout() : no se arroja ninguna respuesta o error, pero la lista de nodos contiene todas las tarjetas creadascreateProjectCard(projects) y dentro de la función setTimeout() (en la parte inferior): aquí sucede algo extraño, solo las tarjetas para las que el índice es un número impar se pueden voltear al hacer clic; Además, si hago console.log('clicked') para probar el detector de eventos, todas las tarjetas están registrando 'clicked' en lugar de solo en la que hice clic.createProjectCard(projects) : no se arroja ninguna respuesta o error, pero la lista de nodos contiene todas las tarjetas creadas Me pregunto si este problema proviene de anidar innerFlipCards.forEach dentro de projects.forEach , pero no sé cómo acceder a las innerFlipCards ya que se crean dentro de projects.forEach .
Código antiguo con datos de proyecto codificados, pero las tarjetas invertidas funcionan en dispositivos móviles: https://codepen.io/awelie_go/pen/KKXPQBJ
Código nuevo con datos de proyectos dinámicos, pero las tarjetas invertidas no funcionan en dispositivos móviles: https://codepen.io/awelie_go/pen/OJxLQvQ
Si alguien tiene alguna pista sobre cómo solucionar esto, me encantaría escucharla. Gracias por tu tiempo
Parece que hay un par de problemas en el código que no funciona.
Debido al setTimeout dentro de su ciclo, las tarjetas no se crean inmediatamente, pero
const innerFlipCards = document.querySelectorAll(".flip-card-inner");
intenta obtener una lista de ellos y recorrerlos, sin embargo, dado que aún no hay tarjetas, el resultado está vacío.
Sin embargo, si eliminamos el tiempo de espera, hay otro problema. La misma línea de código mencionada anteriormente (que es seguida por un ciclo a través de los resultados), se ejecuta en cada iteración del ciclo.
Lo que eso significa es que, si tiene 3 tarjetas, su primera tarjeta tendrá 3 controladores de eventos de clic, la segunda tendrá 2 y la tercera solo 1. Lo que explica por qué solo funcionaron las tarjetas impares. Sería similar a si el usuario hiciera clic en la primera tarjeta 3 veces rápidamente.
Entonces, ¿cómo debemos remediar esto? Una solución más sencilla sería crear un div flip-card-inner con createElement , agregarle los detectores de eventos y agregarlo a su flip-card . De esa manera, puede configurar todo en la creación, en lugar de tener que consultar sus tarjetas más tarde y preocuparse por los tiempos.