Estoy tratando de escribir una función simple para mostrar u ocultar dinámicamente un elemento. He escrito funciones como esta varias veces antes y nunca he tenido un problema... No puedo entender qué está mal aquí. Utilizo Javascript para crear dinámicamente el elemento y luego, en el proceso de crearlo y agregarlo a la página, también escribo $(element).css("display", "none") para que se oculte en la página carga.

Ahora estoy escribiendo una función de escucha de eventos para mostrar los elementos ocultos en respuesta a un evento de clic. Cuando hago clic en el botón con este detector de eventos adjunto, los elementos ocultos SÍ aparecen (¡genial!), pero luego, cuando vuelvo a hacer clic en el cuadro, permanecen en la página. Cuando console.log la sesión de la función, puedo ver que siempre está presionando la condición de show y nunca presionando la condición de hide ... pero no puedo entender por qué después de pasar horas y horas mirando ejemplos y probando diferentes implementaciones.

Para ser claros, no asigné display: none; en la hoja de estilo CSS estática. Lo agregué dinámicamente en el JS cuando creé los elementos.

 // Pass in an array of cards called "filterCards" const toggleDisplayFilterCards = (filterCards) => { // Loop through the cards, and for each card, grab the ID tag for (let card of filterCards) { card = `#filter-card-container_${card.id}`; // If "display" style attribute = "none", show the div, else, hide it. if ($(card).css("display", "none")) { $(card).css("display", "") console.log("show"); } else if ($(card).css("display", "")) { $(card).css("display", "none"); console.log("hide"); } } };

¿Alguien ve una razón por la cual este código nunca alcanzaría la condición de "ocultar"? Inspeccioné el elemento en la consola una vez que se muestra en la página y confirmé que el atributo de estilo se cambió a "" , por lo que cuando hago clic en el mismo botón, espero que la función presione la condición "ocultar".