为什么我的querySelectorAll即使将其转换为数组也无法正常工作？

Question

querySelectorAll不起作用

[伙计们，我一直在尝试通过dom操作（querySelectorAll）将我的JavaScript文件中的一些数据注入到索引html中，但是它不起作用。请注意，我还尝试将节点列表转换为数组以使其在html上显示，但无济于事，它仍然无法正常工作。我花了一些时间搜索类似的类似问题，但找不到任何问题。

const card = document.querySelectorAll('.card-row')
const newCard = Array.from(card)


const data = [{
    topic: 'Food',
    title: 'Wake Up and Smell the Coffee',
    price: '$0.90',
    color: green
  },
  {
    topic: 'Architecture',
    title: 'The Brand New NASA Office',
    price: '$0.19',
    color: black
  },
  {
    topic: 'Travel',
    title: 'Experience the Saharan Sands',
    price: '$2.29',
    color: brown
  },
  {
    topic: 'Interior',
    title: '9 Air-Cleaning Plants Your Home Needs',
    price: '$0.09',
    color: greenblue
  },
  {
    topic: 'Food',
    title: 'One Month Sugar Detox',
    price: '$0.99',
    color: pink
  },
  {
    topic: 'Photography',
    title: 'Shooting Minimal Instagram Photos',
    price: '$0.29',
    color: blue
  }
]
data.forEach(info => {
  card.innerHTML += `
      <span>${info.topic}</span>
      <h3>${info.title}</h3>
      <p>${info.price}</p>
    `
})

.card-row {
  width: 300px;
  height: 270px;
  border-radius: 15px;
  background-color: tomato;
  color: #fff;
}

<section class="section">
  <div class="container">
    <div style='margin: 40px 10px 40px'>
      <h1>Lifestyle.</h1>
      <p>The latest and best lifestyle articles selected<br/> by our editorial office.
      </p>
    </div>
  </div>
  <div class="container">
    <div class='card-row'></div>
    <div class='card-row'></div>
    <div class='card-row'></div>
    <div class='card-row'></div>
    <div class='card-row'></div>
    <div class='card-row'></div>
  </div>
</section>

[基本上，我希望我的数据变量循环并将对象插入卡中。我试过只使用querySelector，当然它适用于第一张卡，但这不是我想要实现的。我还可以给每张卡一个ID，并手动放置每个数据的对象，但这效率不高，因此我试图避免使用长代码。

我希望我的解释足够清楚。预先谢谢！

Answer 1

假设.card-row元素的数量与data中的条目相同，则只需将索引作为forEach中的第二个参数传递，并使用该参数选择正确的.card-row元素

data.forEach((info, i) => {
  card[i].innerHTML += `
      <span>${info.topic}</span>
      <h3>${info.title}</h3>
      <p>${info.price}</p>
    `
})

还有另外两个问题：

1. 在您的示例数据中，您缺少颜色值上的'，因此无法将它们视为字符串（可能只是您忘记了包含在内）
2. 您已经定义了newCard，但是将card用于您的forEach

const card = document.querySelectorAll('.card-row')
const newCard = Array.from(card)

const data = [{
    topic: 'Food',
    title: 'Wake Up and Smell the Coffee',
    price: '$0.90',
    color: 'green'
  },
  {
    topic: 'Architecture',
    title: 'The Brand New NASA Office',
    price: '$0.19',
    color: 'black'
  },
  {
    topic: 'Travel',
    title: 'Experience the Saharan Sands',
    price: '$2.29',
    color: 'brown'
  },
  {
    topic: 'Interior',
    title: '9 Air-Cleaning Plants Your Home Needs',
    price: '$0.09',
    color: 'greenblue'
  },
  {
    topic: 'Food',
    title: 'One Month Sugar Detox',
    price: '$0.99',
    color: 'pink'
  },
  {
    topic: 'Photography',
    title: 'Shooting Minimal Instagram Photos',
    price: '$0.29',
    color: 'blue'
  }
];

data.forEach((info, i) => {
  card[i].innerHTML += `
      <span>${info.topic}</span>
      <h3>${info.title}</h3>
      <p>${info.price}</p>
    `
})

.card-row {
  width: 300px;
  height: 270px;
  border-radius: 15px;
  background-color: tomato;
  color: #fff;
}

<div class="container">
  <div style='margin: 40px 10px 40px'>
    <h1>Lifestyle.</h1>
    <p>The latest and best lifestyle articles selected<br/> by our editorial office.
    </p>
  </div>
</div>
<div class="container">
  <div class='card-row'></div>
  <div class='card-row'></div>
  <div class='card-row'></div>
  <div class='card-row'></div>
  <div class='card-row'></div>
  <div class='card-row'></div>
</div>

Answer 2

看起来您的数据是可迭代的（可以通过循环映射的东西），并且卡的数组也是可迭代的，因为您已使用querySelectorAll选择了它。它返回一个可迭代的节点列表。因此，您不能直接使用card.innerHtml。看起来有一个建议。不要在HTML中创建空的.card-row元素。而是在遍历数据数组时在javascript中生成html。您可以使用Javascript生成html。 .createElement（）。我认为这非常灵活，现在您可以对代码进行更多控制。该代码应如下所示：

data.forEach((info) => {
   card = document.createElement('div').classList().add('card-row').innerHTML = `
  <span>${info.topic}</span>
  <h3>${info.title}</h3>
  <p>${info.price}</p>
`;

document.querySeletor（'。container'）。append（card）;}）;

我认为这更加清楚。 （您无需选择顶部的卡）