如何制作循環並動態創建它？

Question

如何更正 javascript 代碼以動態創建 li 以進行循環？

我用這個代碼，怎么辦？

因為在這段代碼中我必須為每個部分重復

    let content = document.createElement('span');
    let liststart = document.createElement('span');

    let listelement1 = document.createElement('li');
    let listelement2 = document.createElement('li');
    let listelement3 = document.createElement('li');
    let listelement4 = document.createElement('li');

    listelement1.innerHTML = "section 1";
    listelement2.innerHTML = "section 2";
    listelement3.innerHTML = "section 3";
    listelement4.innerHTML = "section 4";

    let section1 = document.getElementById("section1");
    let section2 = document.getElementById("section2");
    let section3 = document.getElementById("section3");
    let section4 = document.getElementById("section4");

    listelement1.addEventListener("click", function() {
      section1.scrollIntoView(true);
      section1.classList.add("my-active");
      section2.classList.remove("my-active");
      section3.classList.remove("my-active");
      section4.classList.remove("my-active");
    });

    listelement2.addEventListener("click", function() {
      section2.scrollIntoView(true);
      section1.classList.remove("my-active");
      section2.classList.add("my-active");
      section3.classList.remove("my-active");
      section4.classList.remove("my-active");
    });

    listelement3.addEventListener("click", function() {
      section3.scrollIntoView(true);
      section1.classList.remove("my-active");
      section2.classList.remove("my-active");
      section3.classList.add("my-active");
      section4.classList.remove("my-active");
    });

    listelement4.addEventListener("click", function() {
      section4.scrollIntoView(true);
      section1.classList.remove("my-active");
      section2.classList.remove("my-active");
      section3.classList.remove("my-active");
      section4.classList.add("my-active");
    });

    liststart.appendChild(listelement1);
    liststart.appendChild(listelement2);
    liststart.appendChild(listelement3);
    liststart.appendChild(listelement4);

    content.appendChild(liststart);

    let navbar__list = document.querySelector('#navbar__list');
    navbar__list.append(content);

    let tabs = document.getElementsByTagName("li");

    for (let i = 0; i < tabs.length; i++) {
      tabs[i].addEventListener("click", function() {

        let current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace("active");
        this.className += "active";
      });
    }

Answer 1

希望這將為您提供一個示例：

let content = document.createElement('span');

let liststart = document.createElement('span');

var sections = [];

for(let i = 1; i <= 4; i++) {
  const listElement = document.createElement('li');
  listElement.innerText = `Section ${i}`
  const section = document.getElementById(`section${i}`)
  sections.push(section)
  listElement.addEventListener("click", () => {
    section.scrollIntoView(true)
    sections.forEach(el => el.classList.remove("my-active"))
    section.classList.add("my-active")
  })
  liststart.appendChild(listElement)
}

content.appendChild(liststart);

let navbar__list = document.querySelector('#navbar__list');
navbar__list.append(content);

let tabs = document.getElementsByTagName("li");


for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener("click", function() {
    let current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace("active");
    this.className += "active";
  });
}

---

如果我自己這樣做，知道有“未知”數量的部分，我會使用 JavaScript 代碼，該代碼使用每個 id 以“secton”開頭的部分：

let content = document.createElement('span');
let liststart = document.createElement('span');
// this line puts all elements that have an id starting with 'section' into an array
var sections = [...document.querySelectorAll('[id^=section]')] 

sections.forEach(section => {
  const listElement = document.createElement('li');
  listelement.innerText = `Section ${i}`
  listElement.addEventListener("click", () => {
    section.scrollIntoView(true)
    sections.forEach(el => el.classList.remove("my-active"))
    section.classList.add("my-active")
  })
  liststart.appendChild(listElement)
})

content.appendChild(liststart);

let navbar__list = document.querySelector('#navbar__list');
navbar__list.append(content);

let tabs = document.getElementsByTagName("li");


for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener("click", function() {
    let current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace("active");
    this.className += "active";
  });
}

這個解決方案非常相似，但對我來說更具可讀性。