主页 / user-672678

Daria's questions

Martin Hope
Daria
Asked: 2025-01-08 19:28:11 +0000 UTC
  • 6

页面连接了一个initialCards卡片数组，布局中准备了一个模板#card-template用于展示卡片。

const initialCards = [
    {
      name: "Архыз",
      link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/arkhyz.jpg",
    },
    {
      name: "Челябинская область",
      link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/chelyabinsk-oblast.jpg",
    },
    {
      name: "Иваново",
      link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/ivanovo.jpg",
    },
    {
      name: "Камчатка",
      link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kamchatka.jpg",
    },
    {
      name: "Холмогорский район",
      link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kholmogorsky-rayon.jpg",
    },
    {
      name: "Байкал",
      link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/baikal.jpg",
    }
];
<!-- TEMPLATE -->
    <template id="card-template">
      <li class="places__item card">
        <img class="card__image" src="" alt="" />
        <button type="button" class="card__delete-button"></button>
        <div class="card__description">
          <h2 class="card__title"></h2>
          <button type="button" class="card__like-button"></button>
        </div>
      </li>
    </template>

我需要使用结果函数将页面上数组中的所有卡片显示到一个元素中.places__list

// Объявили переменную, куда выведем готовые карточки
const placesList = document.querySelector(".places__list");

function renderCard({ name, link }) {
  // Скопировали шаблон

  const cardTemplate = document.querySelector("#card-template").content;
  const cardElement = cardTemplate
    .querySelector(".places__item")
    .cloneNode(true);

  // Установили значения вложенных элементов
  cardElement.querySelector(".card__title").textContent = name;
  cardElement.querySelector(".card__image").src = link;
  cardElement.setAttribute("alt", name);

  // Обработчик клика, по которому будет вызван переданный в аргументах колбэк (функция).
  const deleteButton = cardElement.querySelector(".card__delete-button");
  deleteButton.addEventListener("click", deleteCard);
}

// Функция удаления
function deleteCard() {
  const cards = this.parentElement;
  cards.remove();
}


initialCards.forEach(renderCard, deleteCard);
placesList.append(cardElement);
<!-- СЕКЦИЯ С КАРТОЧКАМИ -->
        <section class="places page__section">
          <ul class="places__list"></ul>
        </section>

据我了解，这需要placesList.append(cardElement)写在一个新函数或全局中

问题是cardElement它位于函数本地renderCard()

因此，控制台会抛出错误：

Uncaught ReferenceError: cardElement is not defined

针对以上情况，请专家帮忙解决以下问题：

  1. 该函数renderCard()应该以一张卡的数据和一个用于删除的回调函数作为参数（我这样做了），并返回准备输出的卡元素

我不明白如何实现这个

  1. 如何使用结果函数在元素中的页面上显示数组中的所有卡片.places__list.？

placesList.append(cardElement)添加到功能的选项renderCard()不起作用

javascript