为什么我的查询选择器全部不起作用，即使我将其转换为数组?

Question

querySelectorAll 不起作用

嘿伙计们，我一直在尝试使用 DOM 操作(querySelectorAll(将我的 JavaScript 文件中的一些数据注入我的索引 html，但它不起作用。

请注意，我也尝试将nodelist转换为数组以使其显示在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>

基本上，我希望我的数据变量循环并将对象注入到我的卡中。我尝试仅使用查询选择器，当然它适用于第一张卡，但这不是我想要实现的目标。

我还可以给每张卡一个 ID 并手动放置每个数据的对象，但它效率不高，我试图避免使用长代码。

我希望我的解释足够清楚。提前谢谢你！

Answer 1

假设您拥有与data中的条目相同数量的.card-row元素，您可以将索引作为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);});

我认为这一点要清楚得多。(您无需选择顶部的卡片(