使用 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>") ;  

}

Answer 2

id 的一般概念是它标识文档中的单个元素。在您的情况下，div 共享 id 并因此getElementById实现最后一个，解决方案是根据迭代的当前索引使每个元素的每个 id 唯一，例如fruit-0，fruit-1，...

正如您将看到的，Javascript 是一种非常通用的编程语言，例如for..of，它允许您以更简单的方式迭代数组或类似元素的元素，许多程序员使用这种方法，因为它非常友好，而且说实话我们少写

const fruits = ["Banana", "Orange", "Apple", "Mango"];

for (const [index, fruit] of fruits.entries()) {

  const element = `<div id="fruit-${index}" class="${fruit}">${fruit}</div>`;

  console.log(element);

}

About .entries(), 在示例中使用是因为for..of没有办法检查迭代中的当前索引，因为在您的情况下，您可以使用 .entries()它允许您获取当前数组的 id 和 value，[index, value]然后将这些传递给您使用在迭代中