Javascript——为什么我可以显示隐藏的div,但不能隐藏它?

我正在尝试编写一个简单的函数来动态显示或隐藏元素。我以前写过好几次这样的函数,从来没有遇到过问题。。。我不知道这里出了什么问题。我使用Javascript动态创建元素,然后在创建元素并将其附加到页面的过程中,我还编写 $(element).css("display", "none") 以便在页面加载时将其隐藏。

现在,我正在编写一个事件侦听器函数来显示隐藏元素,以响应单击事件。当我点击连接了这个事件监听器的按钮时,隐藏的元素确实出现了(太棒了!),但是,当我再次点击这个框时,它们会留在页面上。当我 console.log 在函数外,我可以看到它总是击中 show 条件,并且永远不要击中目标 hide 条件但在花了数小时研究示例并尝试不同的实现之后,我不明白为什么。

说清楚点,我没有分配 display: none; 在静态CSS样式表中。我在创建元素时在JS中动态添加了它。

// 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");
    }
  }
};

有人知道为什么这段代码永远不会达到“隐藏”条件吗?一旦元素显示在页面上,我就检查了控制台中的元素,并确认style属性 有 改为 "" ,因此,当我单击同一按钮时,我希望函数达到“隐藏”条件。