我如何清理这段代码，以使JavaScript中的按钮列表显示出特定的信息，同时摆脱其他内容？

Question

我不了解其中的所有内容，因此，如果我不够简洁或使用错误的术语，让我开始道歉。我已经成功创建了几种方法，这些方法可以使用户单击页面上的各种按钮，当单击特定按钮时，将显示适当的内容。我的问题是-我该怎么做才能清理一下？我考虑过要尝试为按钮本身创建一个数组，为内容创建一个数组，并使用if / else语句为各个按钮单击显示合适的内容。如果不是因为其他内容消失了，我可能会觉得有些困惑。 las，就像我说的那样，我是新手，任何有关逻辑，方法，类等的想法都可以帮助我省去麻烦。谢谢！

到目前为止，这是我如何使工作正常进行的方式。如果您需要查看与之兼容的HTML，我很乐意发布。

function chapter1Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "block";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("1").addEventListener("click", chapter1Display, false);

function chapter2Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "block";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("2").addEventListener("click", chapter2Display, false);

function chapter3Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "block";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("3").addEventListener("click", chapter3Display, false);

function chapter4Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "block";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("4").addEventListener("click", chapter4Display, false);

function chapter5Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "block";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("5").addEventListener("click", chapter5Display, false);

function chapter6Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "block";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("6").addEventListener("click", chapter6Display, false);

function chapter7Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "block";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("7").addEventListener("click", chapter7Display, false);

function chapter8Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "block";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("8").addEventListener("click", chapter8Display, false);

function chapter9Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "block";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("9").addEventListener("click", chapter9Display, false);

function chapter10Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "block";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("10").addEventListener("click", chapter10Display, false);

function chapter11Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "block";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("11").addEventListener("click", chapter11Display, false);

function chapter12Display() {
  document.getElementById("filler").style.display = "none";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "block";
}
document.getElementById("12").addEventListener("click", chapter12Display, false);

function refresh() {
  document.getElementById("filler").style.display = "block";
  document.getElementById("ch1").style.display = "none";
  document.getElementById("ch2").style.display = "none";
  document.getElementById("ch3").style.display = "none";
  document.getElementById("ch4").style.display = "none";
  document.getElementById("ch5").style.display = "none";
  document.getElementById("ch6").style.display = "none";
  document.getElementById("ch7").style.display = "none";
  document.getElementById("ch8").style.display = "none";
  document.getElementById("ch9").style.display = "none";
  document.getElementById("ch10").style.display = "none";
  document.getElementById("ch11").style.display = "none";
  document.getElementById("ch12").style.display = "none";
}
document.getElementById("refresher").addEventListener("click", refresh, false);

Answer 1

我将为所有这些ID为chapter的元素添加ch[x]类。然后，您可以具有以下功能：

const showChapter = number => {
    document.querySelectorAll('.chapter').style.display = 'none';
    document.getElementById(`ch${number}`).style.display = "block";
}

它会隐藏所有章节，然后仅显示您要的章节。

干杯！ 🍻