如何在JavaScript中结合Switch()与IF语句实现网格颜色动态控制？

代码问题盘点 #

• 核心逻辑错误：外层循环遍历每一个KB-CellActive下的div时，每次触发switch分支都会全量重渲染所有网格的颜色，最终渲染结果会被最后一个遍历到的KB-CellActive元素的取值覆盖，完全不符合「单个cell单独判断是否要设灰」的需求。
• 变量未声明：val、target都没有加let/const声明，隐式成为全局变量，同时你在switch分支里重写了外层的values变量，会打乱原有的遍历逻辑。
• HTML规范问题：存在大量重复id，比如所有KB-CellActive下的div都用了KBA1作为id，KB-values和KB-valuesx里的KBV11、KBV12也重复，可能导致选择器异常。
• 结构嵌套错误：你把KB-CellActive容器放在了KB-valuesx内部，遍历KB-valuesx div的时候会把KB-CellActive下的元素也取到，导致颜色赋值逻辑混乱。

修复方案 #

你不需要嵌套switch和多层循环，直接遍历所有KB-CellActive的元素，对每个元素单独判断状态即可：

// 遍历所有控制开关的元素
document.querySelectorAll(".KB-CellActive div").forEach(activeEl => {
  const isDisabled = Number(activeEl.innerHTML.trim()) === 1;
  const target = document.querySelector(activeEl.dataset.target);
  if (!target) return;

  if (isDisabled) {
    // 关闭状态设灰色
    target.style.backgroundColor = "#808080";
  } else {
    // 开启状态读取对应数值设色
    // 优先取KB-values里的数值
    const valueEl = document.querySelector(`.KB-values div[data-target="${activeEl.dataset.target}"]`);
    // 没有对应值则取KB-valuesx里的数值
    const valueElx = document.querySelector(`.KB-valuesx div[data-target="${activeEl.dataset.target}"]`);
    const val = valueEl ? Number(valueEl.innerHTML.trim()) : Number(valueElx.innerHTML.trim());

    // 按对应阈值设色
    if (valueEl) {
      if (val >= 5) {
        target.style.backgroundColor = "#287d00";
      } else if (val >=3 && val <5) {
        target.style.backgroundColor = "#e0880b";
      } else {
        target.style.backgroundColor = "#ff0000";
      }
    } else if (valueElx) {
      if (val >= 3) {
        target.style.backgroundColor = "#287d00";
      } else if (val >=2 && val <3) {
        target.style.backgroundColor = "#e0880b";
      } else {
        target.style.backgroundColor = "#ff0000";
      }
    }
  }
});

另外需要调整HTML结构，把KB-CellActive容器从KB-valuesx里移出来，避免被错误遍历，同时修正重复id：

<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 单独放置，id全局唯一-->
<div class="KB-CellActive">
  <div data-target="#KB-1" id="KBA1">1</div>
  <div data-target="#KB-2" id="KBA2"> 0 </div>
  <div data-target="#KB-3" id="KBA3"> 0 </div>
  <div data-target="#KB-4" id="KBA4"> 1 </div>
  <!-- 其余cell对应的开关可在此处补全 -->
</div>

内容的提问来源于stack exchange，提问作者jhew123