设置不同的字体颜色基于数组在一个文档的所有跨度?

Question

使用JavaScript，我想从颜色数组中更改每个<span>的样式。下面是一个例子:

HTML:

<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>

JS:

colors=['red', 'orange', 'yellow', 'blue','green'];
[...document.querySelectorAll('span')].map( sp => {
sp.style.color = colors[0];
colors.shift();
});

现在我的想法是扩展我的选择并使用map，这样我就可以遍历每个对象。目前，我正在删除正在使用的颜色中的元素。我还可以创建一个迭代器来跟踪颜色，这样它们就不会被删除。假设对象的数量和颜色的数量是相同的，我也可以只执行一个for循环并设置颜色。

我怎样才能做到这一点?

Answer 1

因为map()返回一个新的数组而您没有使用它，forEach()将是这里更好的选择。

您可以解析到forEach()中的箭头函数，就像map()中当前元素一样也是可选的，但在这里非常有用的是当前元素的索引．这个索引可以作为你的colors数组的索引。

注意:这里不需要shift()，所以我删除了它

当元素的颜色多于元素的颜色时，可以使用余数运算符%为额外的元素赋予正确的颜色。(再次从colors数组的开头开始)

colors = ['red', 'orange', 'yellow', 'blue', 'green'];
document.querySelectorAll('span').forEach((sp, ind) => {
sp.style.color = colors[ind];
});

<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>

Answer 2

正如您在问题中指出的那样，shift()工作，但同时破坏了颜色数组。此外，Array.prototype.map()返回一个新数组，您没有使用它，并且还要求您将NodeList转换为数组。

要解决所有这些问题，您可以使用返回的NodeList提供的NodeList.prototype.forEach())方法来迭代列表，并使用传递的index来访问colors数组。

(在你的问题中，colors数组的长度和跨度的数量是相同的，但如果spans的数量增加，任何通过的5将不会被分配颜色。要解决这个问题，可以通过对传递的索引colors[i % colors.length])

使用剩余%操作符来遍历数组。

colors = ['red', 'orange', 'yellow', 'blue', 'green'];
document.querySelectorAll('span').forEach((sp, i) => {
sp.style.color = colors[i % colors.length];
});

<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>

tacoshy在注释中注意到，您也可以使用CSS在:nth-child()伪类规则中使用函数符号来实现这一点。参见:选择CSS中的第n个元素以获得更多讨论。

span:nth-child(5n+1) {
color: red;
}
span:nth-child(5n+2) {
color: orange;
}
span:nth-child(5n+3) {
color: yellow;
}
span:nth-child(5n+4) {
color: blue;
}
span:nth-child(5n+5) {
color: green;
}

<div class="container">
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span> 
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>
</div>