javascript - 为不同的数组元素添加唯一的 CSS

Question

在过去的半小时里，我试图环顾四周，但我相信以前没有人问过这个问题，因为我找不到答案。如何为数组中的每个元素指定不同的 CSS。最好将类附加到数组元素以限制冗余。

var Stat = new Array();

Stat[0] = "<span class='good'>Alive</span>";

换句话说，我想完成上述工作。

Answer 1

我希望我能正确理解你的问题。您可以遍历数组并附加一个带有前缀后跟索引的类。如果我没有正确遵循您的问题，请告诉我。

var Stat = new Array();

for (var i = 0; i < 6; i++) {
  Stat.push('<span class="good' + i + '">Alive</span>');
}

// Produces an array with the following:
<span class="good0">Alive</span>
<span class="good1">Alive</span>
<span class="good2">Alive</span>
<span class="good3">Alive</span>
<span class="good4">Alive</span>
<span class="good5">Alive</span>

Answer 2

要使用您的 HTML/CSS 代码填充数组，您可以执行以下操作：

var Stat = new Array();

Stat.push("<span class='good'>Alive</span>");

Stat.push("<span class='bad'>Dead</span>");

Stat.push("<span class='evil'>Hell</span>");

在您的数组上面的代码之后Stat将具有以下内容：

Stat[0] == "<span class='good'>Alive</span>";

Stat[1] == "<span class='bad'>Dead</span>";

Stat[2] == "<span class='evil'>Hell</span>";

每个都push创建一个带有增量索引的新数组位置。

希望它可以帮助你！