Javascript 根据数组列表更改div背景色

如何将数组中的背景色应用于类名矩形的每个div

<div id="rectangleWrapper">

<div id="rectangle-1">

</div>
<div id="rectangle-2">

</div>
</div>

const rectWrapDiv = document.getElementById("rectangleWrapper").children;
for (const prop of rectWrapDiv){
prop.classList.add("rectangle");
}

const bcgColor = ["red", "blue" ];
for (let i = 0; i < rectWrapDiv.length; i++){

for (let j = 0; j < bcgColor.length; j++){
    rectWrapDiv[i].style.background  = bcgColor[j];
console.log(bcgColor[j])
}

}

const rectrapdiv=document.getElementById（“矩形包装”）.children；
for（rectWrapDiv的常量属性）{
prop.classList.add（“矩形”）；
}
常量bcgColor=[“红色”、“蓝色”]；
for（设i=0；i

---

当我在控制台浏览器中显示它时，只有索引1作为所有div的背景。

只需使用

for

迭代数组一次，因为子级和bcgColor长度相同

const rectrempdiv=document.getElementById（“矩形包装”）.children；
for（rectWrapDiv的常量属性）{
prop.classList.add（“矩形”）；
}
常量bcgColor=[“红色”、“蓝色”]；
for（设i=0；i

#矩形-1，#矩形-2{
高度：50px；
}

---

只需使用

for

迭代数组一次，因为子级和bcgColor长度相同

const rectrempdiv=document.getElementById（“矩形包装”）.children；
for（rectWrapDiv的常量属性）{
prop.classList.add（“矩形”）；
}
常量bcgColor=[“红色”、“蓝色”]；
for（设i=0；i

#矩形-1，#矩形-2{
高度：50px；
}

---

您正在使用i的每次迭代重新初始化j，因此如果我们遍历您的代码：

i=0
j=0
recWrapDiv[0].style.background = bcgcolor[0]; 
now j=1
recWarpDiv[0].style.background = bcgcolor[1];
now i=1 and j will loop through 0 and 1 again
now j=0 again
recWrapDiv[1].style.background = bcgcolor[0]; 
now j=1
recWrapDiv[1].style.background = bcgcolor[1];
Finished
//All elements are set to bcgcolor[1].

---

我会更改for j循环以实现您想要的结果。

您正在使用I的每次迭代重新初始化j，因此如果我们遍历您的代码：

i=0
j=0
recWrapDiv[0].style.background = bcgcolor[0]; 
now j=1
recWarpDiv[0].style.background = bcgcolor[1];
now i=1 and j will loop through 0 and 1 again
now j=0 again
recWrapDiv[1].style.background = bcgcolor[0]; 
now j=1
recWrapDiv[1].style.background = bcgcolor[1];
Finished
//All elements are set to bcgcolor[1].

---

我会更改您的for j循环以实现您想要的功能。

您可以使用querySelectorAll

常量bcgColor=[“红色”、“蓝色”]； document.queryselectoral（“#矩形包装器div”）.forEach（（div，i）=>{ div.style.backgroundColor=bcgColor[i]； });

#矩形包装div{
高度：50px；
保证金：4倍；
}

---

您可以使用querySelectorAll

常量bcgColor=[“红色”、“蓝色”]； document.queryselectoral（“#矩形包装器div”）.forEach（（div，i）=>{ div.style.backgroundColor=bcgColor[i]； });

#矩形包装div{
高度：50px；
保证金：4倍；
}

你的解释很有意思，即使你没有解决我的问题，但你的解释很清楚。更好地理解一些代码，而不仅仅是复制粘贴一个工作代码。非常有趣的解释，即使你没有解决我的问题，但你非常清楚。更好地理解一些代码，而不仅仅是复制粘贴工作代码。