为什么这些 div 不被隐藏和显示？答案

【问题标题】：Why do these divs not get hidden and revealed?为什么这些 div 不被隐藏和显示？
【发布时间】：2019-07-10 14:46:07
【问题描述】：

我不明白为什么下面的代码会取消隐藏目标元素，但不会隐藏它们。列表 msg 是从 websocket 接收的。它的形式是：

"Line, 4, Auto"
"Line, 4, Heat"
"Line, 4, Cool"
"Line, 4, Fan"
"Line, 4, Off"

将列表推入数组矩阵后，我使用开关块进入array[2]的开关块。代码在适当的时候正确地取消隐藏元素，但不会隐藏它们。

// dummy code
var lines = `Line 4, Heat;Line, 4, Cool;Line, 4, Auto;Line, 4, Fan;Line, 4, Off`.split(";");

lines.forEach(function(msg) {HideUnhide(msg) })

function HideUnhide(msg) {
// end dummy code
  var array = msg.split(',');
  alert(msg)
  switch (array[0]) {
    case "Line":
      switch (Number(array[1])) {
        case 0:
          document.getElementById("Scale").innerHTML = array[2];
          break;
        case 4:
          document.getElementById("Control").innerHTML = array[2];
          test = array[2];
          switch (test.trim()) {
            case "Auto":
                document.getElementById("Hot").style.visibility = "visible";
                document.getElementById("Cold").style.visibility = "visible";
                break;
            case "Heat":
                document.getElementById("Hot").style.visibility = "visible";
                document.getElementById("Cold").style.visibility = "invisible";
                break;
            case "Cool":
                document.getElementById("Hot").style.visibility = "invisible";
                document.getElementById("Cold").style.visibility = "visible";
                break;

              default:
                document.getElementById("Hot").style.visibility = "invisible";
                document.getElementById("Cold").style.visibility = "invisible";
                break;
          }
      }
  }
}

div.Hot {
  position: fixed;
  top: 75px;
  left: 24px;
  width: 100px;
  font: 20px Arial Bold;
  color: rgb(200, 200, 200);
}

div.Cold {
  position: fixed;
  top: 50px;
  left: 24px;
  width: 100px;
  font: 20px Arial Bold;
  color: rgb(200, 200, 200);
}
div.Control {
        position: fixed;
        top: 25px;
        left: 24px;
        width: 100px;
        font: 20px Arial Bold;
        color: rgb(200,200,200);
}
div.Scale {
        position: fixed;
        top: 0px;
        left: 24px;
        width: 100px;
        font: 20px Arial Bold;
        padding-right: 30px;
        color: rgb(200,200,200);
}

<div id="Hot" style="visibility: hidden; color:rgb(200,200,200)" class="Hot">Cool: 70.0</div>
<div id="Cold" style="visibility: hidden; color:rgb(200,200,200)" class="Cold">Heat: 64.0</div>
<div ID="Scale" style="color:rgb(200,200,200)" class="Scale">&#8457;</div>
<div ID="Control" style="color:black" class="Control">Cool</div>

【问题讨论】：

array[2] 中可能有前导或尾随空格吗？您可以使用类似strip 的方法来删除它。
我认为你必须修剪空白。在第一种情况下，您会通过 Number() 调用对其进行修剪，但在第二种情况下，您会尝试将“Auto”与“Auto”匹配。
您的代码也不完整。请单击[<>] sn-p 编辑器并生成minimal reproducible example，例如使用var lines = `Line, 4, Auto Line, 4, Heat Line, 4, Cool Line, 4, Fan Line, 4, Off`.split(/\n/); lines.forEach(msg => { .... })
在这种情况下，您不需要大括号围绕 switch 语句案例。请参阅 this 了解何时使用它们以及它们的用途。
我已修改您的问题，将代码包含为可运行的 sn-p。请修复您的语法错误（如果它们没有价值，则将其注释掉），以便我们可以复制您描述的问题。（您的“占位符”forEach，以及无效的 switch 语法 - 不应该有 :）

标签： javascript

【解决方案1】：

您传递的数组元素是“Auto”，您的 switch 语句在其中寻找“Auto”，注意空格。您可以更改消息在源处创建的方式，或者您可以检查空格并将其删除，或者编辑您的 switch 语句以适应它。如果这是一个选项并且不会在其他地方创建更多工作，我建议在创建消息时删除空间。

【讨论】：

string.trim() 是一个有用的建议。
我不确定您是否直接复制，但您也缺少一些大括号。
谢谢。不，我没有直接复制。我不得不在这里和那里删除大量代码，以使这个示例与手头的问题完全相关。我不小心取下了一个支架。

【解决方案2】：

我发现了问题。语法是：

document.getElementById("Hot").style.visibility = "hidden";

不是：

document.getElementById("Hot").style.visibility = "invisible";

【讨论】：