javascript - 我可以根据 JavaScript 函数的结果更改我的 HTML 网格对象的类吗？

Question

我正在尝试制作一个方框网格，其中这些方框会根据 JSON 文件的内容改变颜色。我写了一些 JavaScript 输出一个字符串，说明每个框的颜色应该是什么。但是，我不知道如何将其转化为盒子的实际颜色。我知道我可以给每个盒子一个单独的 ID，但是有 300 多个盒子，那将是很多重复代码。目前，我的(非常简单的)代码如下所示:

if (parsedJSON[i]['status'] === "Finished") {
    alert("Green");
} else if (parsedJSON[i]['status'] === "Failed") {
    alert("Red");
} else {
    alert("Orange");
}

其中一个框的示例是:

.timed-out-test-box {
    background-color: darkorange;
}
<div class=timed-out-test-box></div>

关于如何让盒子有颜色而不是仅仅提醒颜色，有什么建议吗？

我使用的是 vanilla JS，框不是动态的。

Answer 1

如果您已经准备好盒子，那么您需要做的就是根据您的 parsedJSON 的 status 向所述盒子添加一个 CSS 类。这是一个工作示例:

// Change status to your parsedJSON's logic
let status = ['Finished', 'Failed', 'Something Else']
let boxes = document.querySelectorAll('div.box')
let i = 0
for (box of boxes) {
  let newClass = ''

  // This is a dummy logical checking to change colours based on status
  if (status[i % 3] == 'Finished')
    newClass = 'green'
  else if (status[i % 3] == 'Failed')
    newClass = 'red'
  else
    newClass = 'orange'

  box.classList.add(newClass)
  i++
}

.box {
  height: 50px;
  width: 50px;
  margin: 10px;
  background-color: black;
}

.box.green {
  background-color: green;
}

.box.red {
  background-color: red;
}

.box.orange {
  background-color: orange;
}

<div class = "box"></div>
<div class = "box"></div>
<div class = "box"></div>
<div class = "box"></div>
<div class = "box"></div>
<div class = "box"></div>
<div class = "box"></div>
<div class = "box"></div>
<div class = "box"></div>
<div class = "box"></div>
<div class = "box"></div>
<div class = "box"></div>

基本上，只需添加一个基于status 的类。但是，如果 boxes 是自动创建的，只需像这样创建元素(当然要更改它以适应您的 parsedJSON 的需要):

let status = ['Finished', 'Failed', 'Something Else']
let body = document.querySelector('body')
let i = 0
for (i; i < 10; i++) {
  let newClass = ''

  if (status[i % 3] == 'Finished')
    newClass = 'green'
  else if (status[i % 3] == 'Failed')
    newClass = 'red'
  else
    newClass = 'orange'


  let newBoxDiv = document.createElement('div')
  newBoxDiv.classList.add('box', newClass)
  body.appendChild(newBoxDiv)
}