启动后，forEach程序会遍历卡片数据数组，并根据传递的模板创建每张卡片（这可以在控制台中看到）。
然而，当使用该方法将卡片显示在屏幕上的适当位置时，append()每张新卡片都会覆盖前一张卡片，但必须插入到它之前。因此，屏幕上仅保留最后创建的卡片。
代码有什么问题吗？
const boxesImages = [
{
name: "Box1",
link: "../images/boxes.JPG",
},
{
name: "Box2",
link: "../images/shellboxes.JPG",
},
{
name: "Box3",
link: "../images/shells.JPG",
},
{
name: "Box4",
link: "../images/tumbs.JPG",
},
{
name: "Box5",
link: "../images/boxes.JPG",
},
]
const elementTemplate = document.querySelector('#card-template').content;
const elementPlace = document.querySelector('.elements__list');
const cardElement = elementTemplate.querySelector('.elements__card').cloneNode(true);
function createCard(link, name) {
cardElement.querySelector('.elements__image').src = link;
cardElement.querySelector('.elements__name').textContent = name;
cardElement.querySelector('.elements__image').alt = name;
const chooseButton = cardElement.querySelector('.elements__button');
chooseButton.addEventListener('click', chooseCard);
return cardElement;
};
function chooseCard() {
return console.log("Good")
}
boxesImages.forEach(function({ link, name }) {
const cardNew = createCard(link, name);
elementPlace.append(cardNew);
console.log(cardNew);
console.log("cardNew")
});<!DOCTYPE html>
<body class="body">
<section class="elements" aria-label="Карточки товара">
<ul class="elements__list">
</ul>
</section>
<template id="card-template">
<li class="elements__card">
<h2 class="elements__name"></h2>
<img class="elements__image" src="" alt="" />
<!-- <button type="button" class="elements__heart"></button> -->
<button type="button" class="elements__button">ВЫБРАТЬ</button>
</li>
</template>
</body>
</html>
1 个回答