Javascript: ¿por qué puedo mostrar un div oculto, pero no ocultarlo?

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 al cargar la página.

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.logdescubro la función, puedo ver que siempre alcanza la showcondición y nunca alcanza la hidecondición... 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".

Answer

que hacen estos dos

$(card).css("display", "none")
$(card).css("display", "")

es que establecen el estilo de la tarjeta y luego devuelven el objeto jQuery que contiene la tarjeta. Los objetos siempre son verdaderos en JavaScript, por lo que hacer

if ($(card).css("display", "none")) {

no tiene sentido

Debe recuperar el estilo (hecho con un solo parámetro), luego compararlo con el valor posible.

if ($(card).css("display") === "none") {
...
} else {