三行代码  ›  专栏  ›  技术社区  ›  Mickey Vershbow

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

  •  0
  • Mickey Vershbow  · 技术社区  · 1 周前

    我正在尝试编写一个简单的函数来动态显示或隐藏元素。我以前写过好几次这样的函数,从来没有遇到过问题。。。我不知道这里出了什么问题。我使用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属性 改为 "" ,因此,当我单击同一按钮时,我希望函数达到“隐藏”条件。

    1 回复  |  直到 1 周前
        1
  •  1
  •   CertainPerformance    1 周前

    这两个人干什么

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

    它们设置卡片的样式,然后返回包含卡片的jQuery对象。对象在JavaScript中总是真实的,所以

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

    没有道理。

    你需要 检索 样式(使用单个参数完成),然后将其与可能的值进行比较。

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