2 回答

TA貢獻1812條經(jīng)驗 獲得超5個贊
這是因為document.getElementById("fruit").className = fruits[i];您通過 id 選擇了一個元素,它只返回 1 個元素,即“第一次出現(xiàn)”,因為您應(yīng)該為每個元素使用唯一的 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>") ;
}

TA貢獻1795條經(jīng)驗 獲得超7個贊
id 的一般概念是它標識文檔中的單個元素。在您的情況下,div 共享 id 并因此getElementById實現(xiàn)最后一個,解決方案是根據(jù)迭代的當前索引使每個元素的每個 id 唯一,例如fruit-0,fruit-1,...
正如您將看到的,Javascript 是一種非常通用的編程語言,例如for..of,它允許您以更簡單的方式迭代數(shù)組或類似元素的元素,許多程序員使用這種方法,因為它非常友好,而且說實話我們少寫
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()
它允許您獲取當前數(shù)組的 id 和 value,[index, value]
然后將這些傳遞給您使用在迭代中
添加回答
舉報