如何根据布尔值为多个进度条设置动态颜色样式

首先咱们先梳理下你当前代码里的几个关键问题：

现有代码的问题 #

• JavaScript语法与逻辑错误：
  1. createPeg函数没有使用传入的checkActive参数，也没有返回值，导致allPegs数组里全是undefined，后续的判断完全无效。
  2. 末尾的uiProgressBarif(allPegs == 1)是语法错误，变量名和if关键字连在一起了，而且allPegs是数组，不可能等于单个数值1或0。
  3. 你在调用createPeg时，有的传pegActive["one"] == 0，有的传==1，逻辑不统一，容易搞混。
• CSS选择器错误：peg-1-bar-fill缺少类选择器的点号，应该写成.peg-1-bar-fill，否则样式不会生效。
• DOM操作逻辑问题：你试图在函数外统一处理所有进度条，但实际上每个进度条需要单独根据对应的pegActive值设置颜色。

最优实现方案 #

咱们可以简化代码逻辑，用循环批量处理12个进度条，同时用CSS类来控制颜色（比直接修改style更易维护），具体实现如下：

1. 修正CSS（添加类选择器，新增颜色类） #

/* 基础进度条样式：一次性选中所有进度条元素 */
[class*="-bar-fill"] {
  border-radius: 50px;
  height: 100%;
  width: 100%;
  max-width: 400px;
}

/* 状态颜色类：后续改颜色只需调整CSS */
.progress-green {
  background-color: green;
}
.progress-red {
  background-color: red;
}

2. 优化JavaScript代码 #

// 假设后端返回的pegActive结构示例：
// const pegActive = {
//   one: 1, two: 0, three: 1, ..., twelve: 0
// };

function setProgressBarColor(pegNumber, value) {
  // 根据序号找到对应的进度条元素
  const barFill = document.querySelector(`.peg-${pegNumber}-bar-fill`);
  if (!barFill) return; // 防止元素不存在时报错

  // 根据后端返回值切换颜色类
  if (value === 1) {
    barFill.classList.add('progress-green');
    barFill.classList.remove('progress-red');
  } else if (value === 0) {
    barFill.classList.add('progress-red');
    barFill.classList.remove('progress-green');
  } else {
    // 异常值默认显示蓝色（可选逻辑）
    barFill.style.backgroundColor = 'blue';
  }
}

// 批量处理12个进度条，避免重复代码
const pegKeys = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve'];
pegKeys.forEach((key, index) => {
  // index+1对应peg的序号1-12
  setProgressBarColor(index + 1, pegActive[key]);
});

• 用forEach循环遍历所有peg的键，避免重复写12次调用，代码更简洁易维护。
• 使用classList添加/移除类来控制颜色，符合前端最佳实践，后续调整颜色只需修改CSS。
• 增加了元素存在性判断，避免DOM元素不存在时抛出错误。

3. HTML保持原有结构即可 #

你的HTML结构完全没问题，只要每个进度条的类名（peg-1-bar-fill、peg-2-bar-fill...）和JS里的选择器对应上就可以正常工作。

这样修改后，就能根据后端返回的pegActive里每个键的0/1值，自动给对应的进度条设置绿色或红色了，逻辑清晰且扩展性强。

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