如何使用 for 循环从 JSON 文件应用样式？

Question

我开门见山，我仍然是 javascript 的初学者，我在将 JSON 文件中的某些数据与特定的 HTML 元素相关联时遇到了问题使用“for 循环”，这样我就可以为它们应用样式。

这是我的 HTML:

<button onclick="yearMap(2004)">See songs</button>
<div class="yearmap-1">
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>      
</div>

我的javascript如下：

  async function yearMap(year) {
    const api_url = 'https://opensheet.elk.sh/1oxsWP57qoaxOZFUpPmwQ-Dkagv0o87qurp92_-VKITQ/year' + year;
    const response = await fetch(api_url);
    const data = await response.json();

    for (let i = 0; i < 52; i++) {
      const { no1genre } = data[i];
      document.querySelector('.yearmap-1 li:nth-child(' + i + ')').style.backgroundColor = no1genre;
      console.log(i)
      console.log(no1genre)
    }
  }

当您单击该按钮时，每个 <li> 元素都应该根据 JSON 文件中的数据列（十六进制代码）中的每个实例按时间顺序设置样式（背景颜色） .有几行数据和 HTML 元素，所以我认为使用带有 :nth-child 选择器的 for 循环是执行此操作的最佳方法，但我不断收到以下错误：Uncaught (in promise) TypeError: Cannot read properties of null (reading 'style') at yearMap

当我用数字替换第 n 个子选择器中的“i”时，它会很好地改变引用的 <li> 元素的样式（no1genre 的最后一个实例来自JSON 文件）。

此外，console.log(i)和console.log(no1genre)证明循环中的每个数字和JSON文件中的十六进制代码都可以一起引用，但我不能将它们应用于每个 <li> 元素。我怀疑 :nth-child 不是解决这个问题的方法，但我不确定还能尝试什么？

在此先感谢您的帮助！

Answer 1

我认为对于你的情况，最好的方法是 在 for-loop 中创建 新的 <li> 元素并将它们附加到正确的位置，而不是拥有固定数量的 <li> 元素并更改它们的属性。

您可能想看看 createElement and appendChild。

Answer 2

您可以使用 eq();函数指定你父class yearmap-1中每个li的索引，然后你可以appy

Answer 3

我不会使用 nth-child，它实际上可能匹配也可能不匹配元素，而是迭代元素列表并相应地分配值

document.querySelectorAll(".yearmap-1 li").forEach((li, i) => {
  li.style.backgroundColor = data[i]?.no1genre ?? ""; // or suitable fallback
});

Answer 4

工作代码

Html:

<button onclick="yearMap(2004)">See songs</button>
<div class="yearmap-1"></div>

Javascript:

async function yearMap(year) {
const api_url =
    'https://opensheet.elk.sh/1oxsWP57qoaxOZFUpPmwQ-Dkagv0o87qurp92_-VKITQ/year' +
    year;
  const response = await fetch(api_url);
  const data = await response.json();

  for (let i = 0; i < 52; i++) {
    const { no1genre } = data[i];
    console.log(no1genre)
    const li = document.createElement("li");
    li.style.backgroundColor = no1genre;
    document.getElementsByClassName('yearmap-1')[0].appendChild(li);
  }
}

Answer 5

你的代码的问题是你的循环运行。您的循环从 0 开始，因此选择器语句变为

document.querySelector('.yearmap-1 li:nth-child('0')').style.backgroundColor = no1genre;

而且因为它试图用第 n 个子选择器获取第 0 个元素，这是不可能的（因为第一个 li 元素将是第一个子元素而不是第 0 个子元素）。所以要么你应该更新你的循环从 1 开始，要么你应该使用： document.querySelectorAll('.yearmap-1 li')[i].style.backgroundColor = no1genre;

在你的 for 循环中。 document.querySelectorAll('.yearmap-1 li') 会给你所有的 li 项目作为一个数组，然后你可以迭代它们以获得你想要的 li 元素。

如何使用 for 循环从 JSON 文件应用样式？

How to apply styles from a JSON file using for loop?

javascript

jquery

json

for-loop

css-selectors