第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

在 forEach 循環(huán)中更新 HTML 元素的集合

在 forEach 循環(huán)中更新 HTML 元素的集合

UYOU 2022-12-22 14:59:15
我正在嘗試更新forEach循環(huán)內(nèi)的 HTML 元素集合。因?yàn)橹钡降?3 節(jié)，一切似乎都在工作，但每當(dāng)我嘗試添加新部分時(shí)，問題就開始了，導(dǎo)航欄中的按鈕在第 4 節(jié)及以上部分不起作用。這是我的 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;}
查看完整描述

3 回答

?
慕標(biāo)琳琳

TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超9個(gè)贊

要forEach在 HTML 集合上使用，您必須將其展開到一個(gè)數(shù)組中：

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


查看完整回答
反對(duì) 回復(fù) 2022-12-22
?
白衣染霜花

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊

問題出在這一行：


allSections[index].scrollIntoView({ behavior: "smooth" });

由于您正在使用 allLists(LI) 索引來訪問 allSections(section)，因此您希望具有相同數(shù)量的部分和 li。


我建議向ignore以下LI元素添加一個(gè)類：


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

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

只要您擁有與 LI 元素相同數(shù)量的 SECTION 元素（不包括 2 個(gè)被忽略的元素），那么您就不會(huì)收到錯(cuò)誤。


更新：我已經(jīng)更正了以下行（之前有一個(gè)#）。確保兩個(gè)allLists作業(yè)都已更新：


allLists = document.querySelectorAll("li:not(.ignore)");

注意：由于allLists循環(huán)現(xiàn)在處于scroll事件中，因此在用戶滾動(dòng)之前它不會(huì)被初始化。


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) {

    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;

}

// Append the above function to the body.

newSectionBtn.addEventListener("click", () => {

    newSectionBtn.insertAdjacentHTML("beforebegin", "<li> Section" + " " + n + "</li>");

    main.appendChild(duplicate(n));

    main.lastElementChild.scrollIntoView({ behavior: "smooth" });

    n++;

});


window.addEventListener("scroll", () => {

    allLists.forEach((list, index) => {

        list.addEventListener("click", () => {

            allSections[index].scrollIntoView({ behavior: "smooth" });

            allSections = document.querySelectorAll("section");

            allLists = document.querySelectorAll("li:not(.ignore)");

        });

    });

});

<button id="newSectionBtn">Hello</button>

<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 class="ignore" id="new-section">NEW SECTION</li>

                <li class="ignore" 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>


查看完整回答
反對(duì) 回復(fù) 2022-12-22
?
婷婷同學(xué)_

TA貢獻(xiàn)1844條經(jīng)驗(yàn) 獲得超8個(gè)贊

我相信每當(dāng)你添加一個(gè)新的Section時(shí)，你也必須連接點(diǎn)擊事件。該forEach塊僅在腳本加載時(shí)運(yùn)行一次，因此僅“知道”前 3 個(gè)部分列表項(xiàng)。



查看完整回答
反對(duì) 回復(fù) 2022-12-22
  • 3 回答
  • 0 關(guān)注
  • 245 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)