提问人：8hoursking 提问时间：9/7/2023 更新时间：9/7/2023 访问量：31
在for循环中使用变量绘制对象时如何防止变量覆盖
How to prevent variable overwriting when using it in for loop to paint objects
问：
我想使用 JS 原生脚本创建 HTML 对象。我有一个函数，它绘制了一些文本，我想优化它。
当我使用它时，它必须在 HTML 中使用循环中编写一些文本以进行几次不同的迭代，但我发现 new 循环不会在 HTML 中生成新对象，而是重制以前的对象。
paintPrimary: (id, alias, country, date, content) => {
let primaryArray = ['Alias', 'Country', 'Date', 'Description'];
console.log(primaryArray);
const $primary = document.createElement('div');
$primary.className = 'teamHeaders';
for (let primaryCounter = 0; primaryCounter < primaryArray.length; primaryCounter ++) {
$primary.innerHTML = primaryArray[primaryCounter];
document.getElementById(id).appendChild($primary);
}
}
我尝试使用构造函数但没有成功。每次都想为每次迭代创建一个新变量，但我不知道该怎么做，也没有找到任何信息
答：
0赞
brk
9/7/2023
#1
在循环中创建元素。在您的情况下，您只创建一次，因此它正在覆盖divdiv
paintPrimary: (id, alias, country, date, content) => {
let primaryArray = ['Alias', 'Country', 'Date', 'Description'];
for (let primaryCounter = 0; primaryCounter < primaryArray.length; primaryCounter++) {
// changed here
const $primary = document.createElement('div');
$primary.className = 'teamHeaders';
$primary.innerHTML = primaryArray[primaryCounter];
document.getElementById(id).appendChild($primary);
}
}
0赞
Shawn
9/7/2023
#2
试试这个：
paintPrimary: (id, alias, country, date, content) => {
let primaryArray = ['Alias', 'Country', 'Date', 'Description'];
console.log(primaryArray);
for (let primaryCounter = 0; primaryCounter < primaryArray.length; primaryCounter++) {
const $primary = document.createElement('div');
$primary.className = 'teamHeaders';
$primary.innerHTML = primaryArray[primaryCounter];
document.getElementById(id).appendChild($primary);
}
}
当您多次调用时，它将为每次调用创建单独的 div 元素集，而不是覆盖之前的内容。paintPrimary
评论