在 forEach 循环中更新 HTML 元素的集合

Question

我正在尝试更新forEach循环内的 HTML 元素集合。因为直到第 3 节，一切似乎都在工作，但每当我尝试添加新部分时，问题就开始了，导航栏中的按钮在第 4 节及以上部分不起作用。

这是我的 HTML：

    <main id="main">

      <header class="main__hero">

        <nav>

          <ul class="flex-container">

            <li>Section 1</li>

            <li>Section 2</li>

            <li>Section 3</li>

            <li id="new-section">NEW SECTION</li>

            <li id="back">BACK TO TOP</li>

          </ul>

        </nav>

        <h1>Landing Page</h1>

      </header>

      <section id="section1" data-nav="Section 1" class="your-active-class">

        <div class="landing__container">

          <h2>Section 1</h2>

          <p>

          </p>

          <p>

          </p>

        </div>

      </section>

      <section id="section2" data-nav="Section 2">

        <div class="landing__container">

          <h2>Section 2</h2>

          <p>

          </p>

          <p>

          </p>

        </div>

      </section>

      <section id="section3" data-nav="Section 3">

        <div class="landing__container">

          <h2>Section 3</h2>

          <p>

          </p>

          <p>

          </p>

        </div>

      </section>

    </main>

这是我的 JavaScript：

let allSections = document.querySelectorAll("section");

let allLists = document.querySelectorAll("li");

let n = 4;

// This function runs wherever the user press add new section button.

function duplicate(num) {

  const newSection = document.createElement("section");

  const newDiv = document.createElement("div");

  const heading = document.createElement("h2");

  const p1 = document.createElement("p");

  const p2 = document.createElement("p");

  newSection.appendChild(newDiv);

  newDiv.appendChild(heading);

  newDiv.appendChild(p1);

  newDiv.appendChild(p2);

  newSection.setAttribute("id", "section" + num);

  newSection.setAttribute("data-nav", "Section" + " " + num);

  newDiv.setAttribute("class", "landing__container");

  heading.textContent = "Section" + " " + num;

  p1.textContent =

    "New text";

  p2.textContent =

    "New text";

  return newSection;

}

Answer 1

要forEach在 HTML 集合上使用，您必须将其展开到一个数组中：let&nbsp;allLists&nbsp;=&nbsp;[...document.querySelectorAll("li")];

Answer 2

问题出在这一行：allSections[index].scrollIntoView({ behavior: "smooth" });由于您正在使用 allLists(LI) 索引来访问 allSections(section)，因此您希望具有相同数量的部分和 li。我建议向ignore以下LI元素添加一个类：<li class="ignore" id="new-section">NEW SECTION</li><li class="ignore" id="back">BACK TO TOP</li>只要您拥有与 LI 元素相同数量的 SECTION 元素（不包括 2 个被忽略的元素），那么您就不会收到错误。更新：我已经更正了以下行（之前有一个#）。确保两个allLists作业都已更新：allLists = document.querySelectorAll("li:not(.ignore)");注意：由于allLists循环现在处于scroll事件中，因此在用户滚动之前它不会被初始化。var newSectionBtn = document.getElementById("newSectionBtn");let allSections = document.querySelectorAll("section");let allLists = document.querySelectorAll("li:not(.ignore)");let n = 4;// This function runs wherever the user press add new section button.function duplicate(num) {&nbsp; &nbsp; const newSection = document.createElement("section");&nbsp; &nbsp; const newDiv = document.createElement("div");&nbsp; &nbsp; const heading = document.createElement("h2");&nbsp; &nbsp; const p1 = document.createElement("p");&nbsp; &nbsp; const p2 = document.createElement("p");&nbsp; &nbsp; newSection.appendChild(newDiv);&nbsp; &nbsp; newDiv.appendChild(heading);&nbsp; &nbsp; newDiv.appendChild(p1);&nbsp; &nbsp; newDiv.appendChild(p2);&nbsp; &nbsp; newSection.setAttribute("id", "section" + num);&nbsp; &nbsp; newSection.setAttribute("data-nav", "Section" + " " + num);&nbsp; &nbsp; newDiv.setAttribute("class", "landing__container");&nbsp; &nbsp; heading.textContent = "Section" + " " + num;&nbsp; &nbsp; p1.textContent =&nbsp; &nbsp; &nbsp; &nbsp; "New text";&nbsp; &nbsp; p2.textContent =&nbsp; &nbsp; &nbsp; &nbsp; "New text";&nbsp; &nbsp; return newSection;}// Append the above function to the body.newSectionBtn.addEventListener("click", () => {&nbsp; &nbsp; newSectionBtn.insertAdjacentHTML("beforebegin", "<li> Section" + " " + n + "</li>");&nbsp; &nbsp; main.appendChild(duplicate(n));&nbsp; &nbsp; main.lastElementChild.scrollIntoView({ behavior: "smooth" });&nbsp; &nbsp; n++;});window.addEventListener("scroll", () => {&nbsp; &nbsp; allLists.forEach((list, index) => {&nbsp; &nbsp; &nbsp; &nbsp; list.addEventListener("click", () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; allSections[index].scrollIntoView({ behavior: "smooth" });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; allSections = document.querySelectorAll("section");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; allLists = document.querySelectorAll("li:not(.ignore)");&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });});<button id="newSectionBtn">Hello</button><main id="main">&nbsp; &nbsp; <header class="main__hero">&nbsp; &nbsp; &nbsp; &nbsp; <nav>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="flex-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Section 1</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Section 2</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Section 3</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="ignore" id="new-section">NEW SECTION</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="ignore" id="back">BACK TO TOP</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; &nbsp; &nbsp; <h1>Landing Page</h1>&nbsp; &nbsp; </header>&nbsp; &nbsp; <section id="section1" data-nav="Section 1" class="your-active-class">&nbsp; &nbsp; &nbsp; &nbsp; <div class="landing__container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Section 1</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </section>&nbsp; &nbsp; <section id="section2" data-nav="Section 2">&nbsp; &nbsp; &nbsp; &nbsp; <div class="landing__container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Section 2</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </section>&nbsp; &nbsp; <section id="section3" data-nav="Section 3">&nbsp; &nbsp; &nbsp; &nbsp; <div class="landing__container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Section 3</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </section></main>

Answer 3

我相信每当你添加一个新的Section时，你也必须连接点击事件。该forEach块仅在脚本加载时运行一次，因此仅“知道”前 3 个部分列表项。