Javascript——为什么我可以显示一个隐藏的 div，但不能隐藏它？

Question

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

现在我正在编写一个事件侦听器函数来显示隐藏的元素以响应点击事件。当我单击附加了此事件侦听器的按钮时，隐藏的元素会出现（太棒了！），但是当我再次单击该框时，它们会留在页面上。当我console.log 退出该函数时，我可以看到它总是达到show 条件而从未达到hide 条件......但我不知道为什么在花费数小时查看示例并尝试不同的实现之后.

需要说明的是，我没有在静态 CSS 样式表中指定 display: none;。我是在创建元素的时候在 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");
    }
  }
};

有没有人看到这段代码永远不会达到“隐藏”条件的原因？一旦它显示在页面上，我已经检查了控制台中的元素，并确认样式属性 已 更改为 ""，所以当我单击同一个按钮时，我会期待该功能达到“隐藏”条件。

Answer 1

这两个是做什么的

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

是他们设置卡片的样式，然后返回包含卡片的jQuery对象。 JavaScript 中的对象总是真实的，所以这样做

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

没有意义。

您需要检索样式（使用单个参数完成），然后将其与可能的值进行比较。

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