Javascript 我已经设法找到了一种方法，通过使用每张幻灯片来获取我的幻灯片文本，但是如何让它显示我的产品而不是文本呢？

我找到了一种在每张空幻灯片上显示文本的方法。到目前为止，一切顺利。但是在我的codepen项目中，你可以看到第一张幻灯片上显示了一个罐头。如何在每张幻灯片上显示一圈罐头盒，而不是在每张幻灯片上显示文字“Hello”

我有这样的想法，它会显示每个幻灯片中的所有罐头，但它不会显示任何罐头

$('#products article').each(function() {
    $(this).append(initApp())
  });

我做错了什么

$('#products article').each(function() {
    $(this).append('hello')
  });

编辑-迄今为止的进展

因此，在each.function（index）中，我可以添加索引，然后在initApp（index）中，我可以添加索引。然后在initApp函数中，我可以进行调整，以便选中瓶子[index]，然后添加。 但似乎什么都不管用？？我做错了什么？ 我知道我有很多方法可以做到这一点

我是否可以跳过initApp（）函数并在.each（function（）{my code to append label}）中添加所有代码？

在

initApp（）中定义
const$container=getElement（'.container'）
getElement
函数调用
document.querySelector（选择器）
只返回与选择器匹配的第一个元素，在本例中是第一个
文章
标记中带有class
.container
的第一个div。这是第一个错误

为了向每个容器中添加瓶子，您需要一个
.container
s列表，您可以使用
$containers=[…document.querySelectorAll（'.container'）]

一旦您拥有了所有的
.container
，您就可以通过这种方式集成forEach函数调用

[$bottle1, $bottle2, $bottle3].forEach(($bottle, i) => {
        $bottle.classList.add('bottle' + i);
        $containers[i].append($bottle)
      });

有可能你仍然找不到像第一项一样的瓶子；这是因为单个
.battle1
，
.battle2
，
.battle3
等具有错误的
letf
和
顶级
css属性；此外，
.side
div缺少
背景图像
属性。
在
initApp（）
中定义
const$container=getElement（'.container'）
getElement
函数调用
document.querySelector（选择器）
只返回与选择器匹配的第一个元素，在本例中是第一个
文章
标记中带有class
.container
的第一个div。这是第一个错误

为了向每个容器中添加瓶子，您需要一个
.container
s列表，您可以使用
$containers=[…document.querySelectorAll（'.container'）]

一旦您拥有了所有的
.container
，您就可以通过这种方式集成forEach函数调用

[$bottle1, $bottle2, $bottle3].forEach(($bottle, i) => {
        $bottle.classList.add('bottle' + i);
        $containers[i].append($bottle)
      });

有可能你仍然找不到像第一项一样的瓶子；这是因为单个
.battle1
，
.battle2
，
.battle3
等具有错误的
letf
和
顶级
css属性；此外，
.side
div缺少
背景图像
属性。
对不起，$containers=[…document.queryselectoral（'.container'）]@billyrope
document.queryselectoral（'.container'）
返回与指定选择器匹配的所有元素（在您的例子中是
.container
）作为节点列表对象。NodeList对象的行为几乎类似于数组：几乎，因为它具有以数字索引存储的项和类似于数组的长度属性，但它没有任何其他数组方法。这意味着在节点列表对象项上使用
append
，将引发错误。因此，我使用扩展运算符在数组中传递NodeList对象的项。这是一个ES6解决方案。对不起，$containers=[…document.querySelectorAll（'.container'）]@billyrope
document.querySelectorAll（'.container'）
将与指定选择器匹配的所有元素（在您的示例中是
.container
）作为节点列表对象返回。NodeList对象的行为几乎类似于数组：几乎，因为它具有以数字索引存储的项和类似于数组的长度属性，但它没有任何其他数组方法。这意味着在节点列表对象项上使用
append
，将引发错误。因此，我使用扩展运算符在数组中传递NodeList对象的项。这是一个ES6解决方案。