javascript - 使用 for 循环结果作为类名

Question

我想学习 JavaScript，却被一些代码卡住了。

我制作了一个数组并在具有固定 id 的 div 中显示结果，但我希望类名是数组结果的名称。

fruits = ["Banana", "Orange", "Apple", "Mango"];
for (i = 0; i < fruits.length; i++) {
document.write("<div id=fruit>" + fruits[i] + "</div>") ;  
document.getElementById("fruit").className = fruits[i];
}

这是我得到的结果

<div id="fruit" class="Mango">Banana</div>
<div id="fruit">Orange</div>
<div id="fruit">Apple</div>
<div id="fruit">Mango</div>

只有第一个 div 得到一个类，但结果错误。

我搜索了几个小时，但无法让它工作。如果有人指出我做错了什么的正确信息，那就太好了。

标签： javascript

Answer 1

这是因为document.getElementById("fruit").className = fruits[i];您通过 id 选择了一个元素，它只返回 1 个元素，即“第一次出现”，因为您应该为每个元素使用唯一的 ID。

你可以简单地做这样的事情：

fruits = ["Banana", "Orange", "Apple", "Mango"];
for (i = 0; i < fruits.length; i++) {
document.write("<div id='"+fruits[i]+"-fruit' class='"+fruits[i]+"'>" + fruits[i] + "</div>") ;  
}