JS通过变量调用ID

Question

Hi-All
第一个数据：

let NewDivForGame_0 = document.createElement('div');
let NewDivForGame_1 = document.createElement('div');
let NewDivForGame_2 = document.createElement('div');

等等…12
下一步：

NewDivForGame_0.id = 'Key';
NewDivForGame_1.id = 'string_1';
NewDivForGame_2.id = '1a1';

等等…12
下一步：追加
下一个：

for (i=0;i<=12;i++){
document.getElementById("NewDivForGame_"+i.id).style.width ="35px"; //ERROR
document.getElementById("NewDivForGame_"+[i].id).style.height= "35px"; //ERROR
document.getElementById("NewDivForGame_"+[i].id).style.backgroundColor = "blue";
console.log('Create size div run #'+i);

它不起作用。请帮帮我请写一个解决方案

已尝试：
1)document.getElementById("NewDivForGame_"+i.id).style.width = "35px"; //ERROR2)document.getElementById("NewDivForGame_"+[i].id).style.width = "35px"; //ERROR
3)

let DetectPer = "NewDivForGame_";
document.getElementById(DetectPer+i.id).style.width = "35px"; //ERROR

它不起作用。请帮帮我请写一个解决方案

Answer 1

另一个例子，可能没有@mplungjan那么短，但它展示了如何以不同的方式完成。

如果您想创建元素，可以使用simple-for-loop来完成，但您需要将它们作为其他DOM元素的子元素添加到DOM中。在下面的例子中，我添加了第一个"div"作为body的子级，第二个作为第一个的子级等等

因为所有元素都引用了newDivForGame数组中存储的位置，所以我们可以使用它来使用simple-for-loop更改样式属性。

{
const newDivForGame = [];
for (let i = 0; i < 12; ++i) {
newDivForGame.push(document.createElement('div'));
newDivForGame[i].id = `key${i}`;
document.body.appendChild(newDivForGame[I]);
}
for (const elem of newDivForGame) {
elem.style.width = '35px';
elem.style.height = '35px';
elem.style.background = 'blue';
}
}

Answer 2

你不能那样构建选择器——这是一厢情愿的想法。要做你正在尝试的事情，你需要评估，或者更糟：

window["NewDivForGame_"+i].id

两者都不是推荐的

为什么不使用querySelectorAll访问它们呢？在这里我可以找到id以NewDivForGame 开头的所有元素

document.querySelectorAll("[id^=NewDivForGame]").forEach(div => {
div.style.width ="35px"; 
div.style.height= "35px"; //ERROR
div.style.backgroundColor = "blue";
})

或者使用css和类

.blueStyle { 
width: 35px;      
height: 35px;
background-color: blue;
}

并进行

NewDivForGame.classList.add("blueStyle") 

或

document.querySelectorAll("[id^=NewDivForGame]").forEach(div => div.classList.add("blueStyle"))

Answer 3

代码的主要问题是以下几行：

for (i=0;i<=12;i++){
document.getElementById("NewDivForGame_"+i.id).style.width ="35px"; //ERROR
document.getElementById("NewDivForGame_"+[i].id).style.height= "35px"; //ERROR
document.getElementById("NewDivForGame_"+[i].id).style.backgroundColor = "blue";
console.log('Create size div run #'+i);
...

据我所知，您正试图通过期望浏览器评估将字符串与数字连接的结果来访问变量。

除此之外，您正试图从i访问id属性，因为它是一个数字。数字基元没有id属性，但根据您的代码，您可能将其与string/eval假设混淆了。

最后，您的[i]行实际上创建了一个数组，编号i是唯一的元素。数组同样没有id属性。

(Un)幸运的是，Javascript不能以这种方式工作。至少不完全是这样；为了让浏览器或容器达到预期效果，可以使用一些方法，但我只引用两种；可怕的eval()，由于这是一种危险的做法，我不会去讨论它，它是一个对象字面定义。当然还有其他方法，比如这里的其他现有答案，但是：

// Here, we define an object literal and assign it properties for each div manually.
let gameDivs = {
NewDivForGame_0: document.createElement('div'),
NewDivForGame_1: document.createElement('div'),
// etc
};
// And then assign the id values sort of like you do in your question;
gameDivs.NewDivForGame_0.id = 'Key';
gameDivs.NewDivForGame_1.id = 'string_1';
gameDivs.NewDivForGame_2.id = '1a1';
// etc
for (i=0;i<=12;i++){
// Before finally using square bracket notation to target the
// properties by a dynamic name;
document.getElementById(gameDivs["NewDivForGame_"+i].id).style.width ="35px";
document.getElementById(gameDivs["NewDivForGame_"+i].id).style.height= "35px"; 
document.getElementById(gameDivs["NewDivForGame_"+i].id).style.backgroundColor = "blue";
console.log('Create size div run #'+i);
}

当然，如果你有他们的参考，你甚至不需要通过他们的id来选择他们，你可以这样做：

for (i=0;i<=12;i++){
// Before finally using square bracket notation to target the
// properties by a dynamic name;
gameDivs["NewDivForGame_"+i].style.width ="35px";
gameDivs["NewDivForGame_"+i].style.height= "35px"; 
gameDivs["NewDivForGame_"+i].style.backgroundColor = "blue";
console.log('Create size div run #'+i);
}

本例假设div被附加到文档中。

此方法在对象文字上使用方括号。您可能知道，也可能不知道，当以动态方式访问对象的属性时，应该使用方括号，例如您之前尝试使用字符串串联。

由于对象的行为方式，您甚至可以使用for循环生成div，然后将它们添加到对象中：

let gameDivs = {};
for (let i = 0; i<=12; i++) {
let gameDiv = document.createElement('div');
gameDivs["NewDivForGame_"+i] = gameDiv;
// append them too;
document.body.appendChild(gameDiv);
}

当然，我不知道你用什么模式来创建元素id，但一般来说，以上都可以。