循环遍历数组。彩虹文字练习

【问题标题】：Looping through arrays. Rainbow Text Exercise循环遍历数组。彩虹文字练习
【发布时间】：2021-11-30 07:38:27
【问题描述】：

需要帮助。我附上了问题的图片，这是代码的图片：

// This is the given code:

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

// I written these:

const spans = document.querySelector('h1 span');

for(let rainbow of spans){
    spans.style.color = " ";
}

【问题讨论】：

但是您需要什么帮助？没有问题。也请no images of code.
您需要将样式应用于rainbow 而不是spans。同样在您的情况下，最好使用for .. in 循环，因为您需要索引，如下所示：for (let i in spans) spans[i].style.color = colors[i]
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： javascript arrays loops for-loop

【解决方案1】：

您应该使用document.querySelectorAll('h1 span') 来获取所有span 项目。

然后你可以使用Array.forEach 来获取字符和索引。然后将索引映射到colors 数组。

// This is the given code:
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

// I written these:
const spans = document.querySelectorAll('h1 span');
spans.forEach((item, index) => {
  item.style.color = colors[index];
})

<h1>
  <span>R</span>
  <span>A</span>
  <span>I</span>
  <span>N</span>
  <span>B</span>
  <span>O</span>
  <span>W</span>
</h1>

【讨论】：

非常感谢。有用。除了 forEach 还有其他方法可以解决这个问题吗？我是初学者，所以循环、数组和函数中的概念对我来说有点难。我有很多与这些相关的问题-
@Rasik07 您可以使用for (const index in spans) 浏览所有span 项目。