主页 / 问题 / 1596337
Accepted
TOLMAX AM
Asked:2024-10-11 06:47:30 +0800 CST2024-10-11 06:47:30 +0800 CST

在开始遍历数组时，ForEach 方法没有看到第一个元素

  • 772

为什么当方法遍历数组时，ForEach第一次迭代不会从第一个数组元素对象中读取数据？只读第二次迭代。结果，仅显示三个 TemplateElement，而不是四个！ （必须有第四张卡）

const goodsTypes = [
  {
    id: "1",
    title: "ЯЩИКИ",
    link: "1",
    description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
  },
  {
    id: "2",
    title: "ПОДСТАВКИ",
    link: "2",
    description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
  },
  {
    id: "3",
    title: "ШКАФЫ",
    link: "3",
    description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
  },
  {
    id: "4",
    title: "ШКАФЫ",
    link: "4",
    description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
  },
]


const elementTemplate = document.querySelector("#goods-template").content;
const elementTitle = elementTemplate.querySelector(".goods__title");
const elementParagraph = elementTemplate.querySelector(".goods__paragraph");
const elementImage = elementTemplate.querySelector(".goods__image");
const elementPlace = document.querySelector(".goods__types");

function createTypesOfGoods(title, link, description) {
  const cardElement = elementTemplate
    .querySelector(".goods__container")
    .cloneNode(true);

  elementTitle.textContent = title;
  elementImage.src = link;
  elementImage.alt = title;
  elementParagraph.textContent = description;

  // const chooseButton = cardElement.querySelector('.elements__button');
  // chooseButton.addEventListener('click', chooseCard);

  return cardElement;
}

function getTypeOfGoods() {
    goodsTypes.forEach(function ({ title, link, description }) {
      const typeNew = createTypesOfGoods(title, link, description);
      console.log(typeNew);
      elementPlace.append(typeNew);
    });
  }
  
  getTypeOfGoods()
   <body class="body">
   <section class="goods__types" aria-label="Виды продукции"></section>
      <template id="goods-template">
      <article id="tumbs" class="goods__container">
        <h2 class="goods__title"></h2>
        <div class="goods__box">
          <img src="" alt="" class="goods__image">
          <div>
            <p class="goods__paragraph"></p>
          </div>
        </div>
      </article>
  </template>

</body>

javascript

1 个回答

  1. Best Answer

    在我看来，您在外部（函数外部）创建常量“elementTitle、elementParagraph、elementImage”的方法从根本上是错误的。我如何向您更清楚地解释这一点，但事实证明，您首先将它们与模板相关联，然后在“createTypesOfGoods”函数中，在第一遍时，您访问的不是新克隆的对象，而是旧的对象这些价值观的本质。这就是为什么forEach他们开始研究第二遍。

    让我尝试将当前的代码稍微改进为可以工作的代码，您可以亲自看看。

        const goodsTypes = [
      {
        id: "1",
        title: "ЯЩИКИ",
        link: "1",
        description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
      },
      {
        id: "2",
        title: "ПОДСТАВКИ",
        link: "2",
        description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
      },
      {
        id: "3",
        title: "ШКАФЫ",
        link: "3",
        description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
      },
      {
        id: "4",
        title: "ШКАФЫ",
        link: "4",
        description: "ТУТ БУДЕТ КРАТКОЕ ОПИСАНИЕ ПРО ЯЩИКИ",
      },
    ]

    const elementTemplate = document.querySelector("#goods-template").content;
    const elementPlace = document.querySelector(".goods__types");
    
    function createTypesOfGoods(title, link, description) {   
      const cardElement = elementTemplate.cloneNode(true);
      cardElement.querySelector(".goods__title").textContent = title;
      const elementImage = cardElement.querySelector(".goods__image");
      elementImage.src = link;
      elementImage.alt = title;
      cardElement.querySelector(".goods__paragraph").textContent = description;
      // const chooseButton = cardElement.querySelector('.elements__button');
      // chooseButton.addEventListener('click', chooseCard);
      return cardElement;
    }

    function getTypeOfGoods() {
       goodsTypes.forEach(function ({ title, link, description }) {
        const typeNew = createTypesOfGoods(title, link, description);
        elementPlace.append(typeNew);
      });
    }
    getTypeOfGoods();
      <section class="goods__types" aria-label="Виды продукции"></section>

  <template id="goods-template">
    <article id="tumbs" class="goods__container">
      <h2 class="goods__title"></h2>
      <div class="goods__box">
        <img src="" alt="" class="goods__image">
        <div>
          <p class="goods__paragraph"></p>
        </div>
      </div>
    </article>
  </template>

    • 2

相关问题