如何在 Javascript 中将 Switch() 与 IF 语句一起使用？答案

【问题标题】：How to use Switch() with IF statments in Javascript?如何在 Javascript 中将 Switch() 与 IF 语句一起使用？
【发布时间】：2021-11-04 23:21:24
【问题描述】：

有人能解释一下我这里有什么问题吗？我有一组网格，它们根据各自输入 div 的值将颜色更改为红色、琥珀色和绿色 - 这一切都很好。

但是，接下来我尝试通过将框设为灰色来添加“关闭”颜色的功能。使用具有另一组等于 1 或 0 的输入 div 的相同逻辑，并向 javascript 添加一个 switch 语句，该语句将运行 2 个 if 语句中的 1 个。第一个将检查我的第一个输入 div 是否为 1（称为 KB-CellActive），如果为真，则会将框颜色更改为灰色。如果它是 0，它将转到检查其他输入 div（KB 值）并将颜色更改为红色、琥珀色或绿色的原始代码块。

我已经分别检查了这两个代码块，它们都可以正常工作，所以我一定是 Switch() 部分出了点问题。

CodePen

let values = document.querySelectorAll(".KB-CellActive div");
values.forEach(function(el) {
  val = Number(el.innerHTML);
  target = document.querySelector(el.dataset.target);

  switch (val) {
    case 1:
      values = document.querySelectorAll(".KB-CellActive div");

      values.forEach(function(el) {
        val = Number(el.innerHTML);
        target = document.querySelector(el.dataset.target);

        if (val > 0) {
          target.style.backgroundColor = "#808080";
        }
      });
      break;

    case 0:
      values = document.querySelectorAll(".KB-values div");

      values.forEach(function(el) {
        val = Number(el.innerHTML);
        target = document.querySelector(el.dataset.target);

        if (val >= 5) {
          target.style.backgroundColor = "#287d00";
        } else if (val >= 3 && val < 5) {
          target.style.backgroundColor = "#e0880b";
        } else if (val <= 2) {
          target.style.backgroundColor = "#ff0000";
        }
      });

      values = document.querySelectorAll(".KB-valuesx div");

      values.forEach(function(el) {
        val = Number(el.innerHTML);
        target = document.querySelector(el.dataset.target);

        if (val >= 3) {
          target.style.backgroundColor = "#287d00";
        } else if (val >= 2 && val < 3) {
          target.style.backgroundColor = "#e0880b";
        } else if (val <= 1) {
          target.style.backgroundColor = "#ff0000";
        }
      });
  }
});

.KB-LineName {
  font-family: Roboto, arial, san-serif;
  padding: 5px;
}

.KB-Grid {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}

.KB-item {
  height: 80px;
  max-width: 150px;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 33.3333%;
  flex-basis: 200px;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid;
  font-size: 20px;
  text-align: center;
  font-family: Roboto, arial, san-serif;
}

.blank {
  height: 0;
}

.KB-values {
  visibility: hidden;
}

.KB-valuesx {
  visibility: hidden;
}

<div class="KB-Grid">
  <h2 class="KB-LineName"> Line 1 </h2>
  <div class="KB-item" id="KB-1">
    PC02</br> Hrs:
  </div>
  <div class="KB-item" id="KB-2">PC11</br> Hrs: </div>
  <div class="KB-item" id="KB-3">PC14</br> Hrs: </div>
  <div class="KB-item" id="KB-4">PC20</br> Hrs: </div>
</div>

<div class="KB-Grid">
  <h2 class="KB-LineName"> Line 2 </h2>
  <div class="KB-item" id="KB-5">PC15A</br> Hrs: </div>
  <div class="KB-item" id="KB-6">PC15B</br> Hrs: </div>
  <div class="KB-item" id="KB-7">PC16A</br> Hrs: </div>
  <div class="KB-item" id="KB-8">PC16B</br> Hrs: </div>
  <div class="KB-item" id="KB-9">PC17</br> Hrs: </div>
  <div class="KB-item" id="KB-10">PC18</br> Hrs: </div>
  <div class="KB-item" id="KB-11">PC1322A</br> Hrs: </div>
  <div class="KB-item" id="KB-12">PC1322B</br> Hrs: </div>
  <div class="KB-item" id="KB-14">PC26</br> Hrs: </div>
  <div class="KB-item" id="KB-15">PC30</br> Hrs: </div>
  <div class="KB-item" id="KB-16">PC33</br> Hrs: </div>
</div>

<div class="KB-Grid">
  <h2 class="KB-LineName"> Line 3 </h2>
  <div class="KB-item" id="KB-17">PC04</br> Hrs: </div>
  <div class="KB-item" id="KB-18">PC05</br> Hrs: </div>
  <div class="KB-item" id="KB-19">PC10</br> Hrs: </div>
  <div class="KB-item" id="KB-20">PC12</br> Hrs: </div>
  <div class="KB-item" id="KB-21">PC32</br> Hrs: </div>
  <div class="KB-item" id="KB-22">PC34</br> Hrs: </div>
  <div class="KB-item" id="KB-23">PC35</br> Hrs: </div>
  <div class="KB-item" id="KB-24">PC25</br> Hrs: </div>
</div>

<div class="KB-Grid">
  <h2 class="KB-LineName"> Electronics </h2>
  <div class="KB-item" id="KB-25">PC23</br> Hrs: </div>
  <div class="KB-item" id="KB-26">PC39</br> Hrs: </div>
  <div class="KB-item" id="KB-27">PC41</br> Hrs: </div>
</div>

<!--Inputs-->
<div class="KB-values">
  <!--PC02-->
  <div data-target="#KB-1" id="KBV1"> 6</div>
  <!--PC11-->
  <div data-target="#KB-2" id="KBV2"> 6 </div>
  <!--PC14-->
  <div data-target="#KB-3" id="KBV3">6 </div>
  <!--PC20-->
  <div data-target="#KB-4" id="KBV4"> 6 </div>
  <!--PC15A-->
  <div data-target="#KB-5" id="KBV5"> 6 </div>
  <!--PC15B-->
  <div data-target="#KB-6" id="KBV6"> 6 </div>
  <!--PC16A-->
  <div data-target="#KB-7" id="KBV7"> 6 </div>
  <!--PC16B-->
  <div data-target="#KB-8" id="KBV8"> 6 </div>
  <!--PC17-->
  <div data-target="#KB-9" id="KBV9"> 6 </div>
  <!--PC18-->
  <div data-target="#KB-10" id="KBV10"> 6 </div>
  <!--PC1322A-->
  <div data-target="#KB-11" id="KBV11"> 6 </div>
  <!--PC1322B-->
  <div data-target="#KB-12" id="KBV12"> 6 </div>
  <!--PC26-->
  <div data-target="#KB-14" id="KBV14"> 6 </div>
  <!--PC30-->
  <div data-target="#KB-15" id="KBV15"> 6 </div>
  <!--PC33-->
  <div data-target="#KB-16" id="KBV16"> 6 </div>
  <!--PC04-->
  <div data-target="#KB-17" id="KBV17"> 6 </div>
  <!--PC05-->
  <div data-target="#KB-18" id="KBV18"> 6 </div>
  <!--PC10-->
  <div data-target="#KB-19" id="KBV19"> 6 </div>
  <!--PC12-->
  <div data-target="#KB-20" id="KBV20"> 6 </div>
  <!--PC32-->
  <div data-target="#KB-21" id="KBV21"> 6 </div>
  <!--PC34-->
  <div data-target="#KB-22" id="KBV22"> 6 </div>
  <!--PC35-->
  <div data-target="#KB-23" id="KBV23"> 6 </div>
  <!--PC25-->
  <div data-target="#KB-24" id="KBV24"> 6 </div>
  <!--PC23-->
  <div data-target="#KB-25" id="KBV25"> 6 </div>
  <!--PC39-->
  <div data-target="#KB-26" id="KBV26"> 6 </div>
  <!--PC41-->
  <div data-target="#KB-27" id="KBV27"> 6 </div>
</div>

<div class="KB-valuesx">
  <!--PC1322A-->
  <div data-target="#KB-11" id="KBV11"> 3 </div>
  <!--PC1322B-->
  <div data-target="#KB-12" id="KBV12"> 2 </div>
  <div>
    <!--Active inputs-->
    <div class="KB-CellActive">
      <div data-target="#KB-1" id="KBA1">1</div>
      <div data-target="#KB-2" id="KBA1"> 0 </div>
      <div data-target="#KB-3" id="KBA1"> 0 </div>
      <div data-target="#KB-4" id="KBA1"> 1 </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： javascript html switch-statement

【解决方案1】：

首先你的代码有问题：

“案例”应该是“案例”
在您的代码末尾，您需要添加“});”，您可以使用任何代码格式化程序来检查您的代码

第二个问题，请阅读开关使用文档。当完成一个案例的代码时，您需要放置一个“break;”表示此案已结案。添加break后，div的第一行已经变成灰色了。

【讨论】：

是的，任何现代 IDE 都会告诉您在 case 子句中缺少一个 break 语句。但它可能不会，因为其余代码在语法上不正确。
谢谢。我已经进行了这些更改，它现在将框更改为灰色。我虽然在 W3 学校读到，如果你使用默认值：你不需要休息，这就是我没有添加它的原因。第一部分正在工作，但它似乎没有读取第二个 if 语句，输入框已全部设置为 6，所以应该是绿色的，但只会变成红色。你知道第二位缺少什么吗？
@jhew123 是的，默认情况下不需要break，但其他情况下需要。对于您的第二个问题，我看到您的 codepen 已更新。也许您可以在这里分享错误的案例详细信息。很可能一步一步的调试会帮助你纠正代码。