根据布尔值对多个项应用样式

Question

我试图改变每个区域的条形图的样式(总共12)，以便当我得到一个1==true(绿色)，如果我得到一个0==false(红色)，这将改变一个条形的颜色取决于我从后端得到什么。

我想不出怎么做才是最直接的方法。

到目前为止，这就是我所拥有的：

function createPeg(name, checkActive ){

  const uiProgressBar = document.querySelector(`.${name}-bar-fill`);


}

const allPegs = [
  createPeg('peg-1',  pegActive["one"] == 0),
  createPeg('peg-2', pegActive["two"]== 1),
  createPeg('peg-3',  pegActive["three"] ==1),
  createPeg('peg-4',  pegActive["four"] == 1),
  createPeg('peg-5',  pegActive["five"] == 1),
  createPeg('peg-6',pegActive["six"]== 1),
  createPeg('peg-7', pegActive["seven"] == 1),
  createPeg('peg-8',  pegActive["eight"] == 1),
  createPeg('peg-9',  pegActive["nine"] ==0),
  createPeg('peg-10', pegActive["ten"] == 1),
  createPeg('peg-11',  pegActive["eleven"] == 1),
  createPeg('peg-12',  pegActive["twelve"] == 1),
];


uiProgressBarif(allPegs == 1){
 .style.background="green";

}else if(allPegs == 0){
uiProgressBar.style.background="red";
}
//to test is working
else{
 uiProgressBar.style.background="blue";
}
}

css：

peg-1-bar-fill{
  border-radius: 50px;
  height: 100%;
  width: 100%;
  max-width: 400px;
}

html：

<div class="peg-wrapper">
  <div class="peg-name-1">
          <h4>1</h4>
        </div>
        <div class="peg-1-start-time total-time">
          <p class="label-2">Length:</p>
          <span id="total-time-1">-</span>
        </div>
        <div class="peg-1-bar">
          <div class="peg-1-bar-fill">
          </div>
        </div>
         </div>

Answer 1

也许你可以用一个三元操作符？它们是一个简单的if语句的缩写。

foo === bar ? doThisWhenTrue() : doThisWhenFalse();

您可能能够确定每一个类名内与三元。