主页 / 问题 / 1595660
Accepted
TOLMAX AM
Asked:2024-10-04 19:28:54 +0800 CST2024-10-04 19:28:54 +0800 CST

使用 forEach 和append() 方法在屏幕上显示卡片。新卡覆盖旧卡

  • 772

启动后，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>

javascript

1 个回答

相关问题