javascript - 如何制作循环并动态创建它？

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";
      });
    }

标签： javascriptloops

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";
  });
}

这个解决方案非常相似，但对我来说更具可读性。