javascript - 如何为数组中的对象应用新类？

Question

我正在使用一个包含 JavaScript 中的一些对象的数组，然后将其显示到 HTML 元素上，这可以工作。我想知道如果球队赢得一场比赛，我如何更改类(class)；如果球队输掉一场比赛，我如何更改类(class)。

我在 If/Else 语句中使用 classList.add，但这似乎不起作用，因为它使所有对象的颜色变为红色。

下面是我的 HTML 代码和 JavaScript 代码。

HTML:

var guide = [{
    result: "won",
    match: "England 2-1 Belgium",
  },
  {
    result: "lost",
    match: "England 0-1 Denmark",
  },
  {
    result: "won",
    match: "England 3-0 Republic of Ireland",
  },
  {
    result: "lost",
    match: "Belgium 2-0 England",
  },
  {
    result: "won",
    match: "England 4-0 Iceland",
  }
]

var text = "";

for (var i = 0; i < guide.length; i++) {
  text += guide[i].match + "<br>";

  if (guide[i].result == "won") {
    document.getElementById("scores").classList.add('colourGreen');
  } else if (guide[i].result == "lost") {
    document.getElementById("scores").classList.add('colourRed');
  }
}

document.getElementById("scores").innerHTML = text;

<div class="form-guide">
  <div class="england-form-guide" id="englandFormGuide">
    <p class="scores" id="scores"></p>
  </div>
</div>

非常感谢。

Answer 1

您正在向顶级父元素添加类，女巫将为内部所有内容着色。

而是在添加元素之前添加带有类名称的跨度:

var guide = [{
    result: "won",
    match: "England 2-1 Belgium",
  },
  {
    result: "lost",
    match: "England 0-1 Denmark",
  },
  {
    result: "won",
    match: "England 3-0 Republic of Ireland",
  },
  {
    result: "lost",
    match: "Belgium 2-0 England",
  },
  {
    result: "won",
    match: "England 4-0 Iceland",
  }
]

var text = "";

for (var i = 0; i < guide.length; i++) {
  
  if (guide[i].result == "won") {
    text += '<span  class="colourGreen">' + guide[i].match + '</span><br>';

  } else if (guide[i].result == "lost") {
    text += '<span class="colourRed">' + guide[i].match + '</span><br>';

  }
}

document.getElementById("scores").innerHTML = text;

.colourGreen{
color:green}

.colourRed{
color:red
}

<div class="form-guide">
  <div class="england-form-guide" id="englandFormGuide">
    <p class="scores" id="scores"></p>
  </div>
</div>