如何使用 Arrays 更改项目颜色

Question

我必须使用数组 colors 更改列表项的颜色。

要修改的元素。

<ul class="list">
      <li class="list__item">1</li>
      <li class="list__item">2</li>
      <li class="list__item">3</li>
</ul>

const colorArray = ["红", "黄", "蓝"];

我试图遍历 list__items，然后遍历 colorArray 并匹配 item[currIndex].style.backgroundColor = colorArray[index] 但每次都出错。

如果有人可以就如何解决它给我建议，我将不胜感激。

<ul class="list">
  <li class="list__item">1</li> <!-- color red-- >
  <li class="list__item">2</li><!-- color yellow-- >
  <li class="list__item">3</li><!-- color blue-- >
</ul>`

Answer 1

您可以使用data-attribute来存储列表项的所需颜色。

遍历项目并将每个项目的颜色设置为保存的颜色，例如：

 document.querySelectorAll(`ul.list li`).forEach(li => li.style.color = li.dataset.color);

 <ul class="list"> <li class="list__item" data-color="red">1 red</li> <li class="list__item" data-color="yellow">2 yellow</li> <li class="list__item" data-color="blue">3 blue</li> </ul>

Answer 2

您可以通过使用querySelectorAll简单地实现此要求，然后对其进行迭代以应用 styles。

现场演示：

 const listItem = document.querySelectorAll('.list__item'); const colorArray = ["red", "yellow", "blue"]; listItem.forEach((item, index) => item.style.color = colorArray[index]);

 <ul class="list"> <li class="list__item">1</li> <li class="list__item">2</li> <li class="list__item">3</li> </ul>