Javascript 除了数组中的数字之外，我还有多个代码相同的函数。这个密码会不会很枯燥？

我正在制作这个幻灯片，底部有可点击的按钮，可以让你浏览幻灯片。背景、块引号和按钮上的小边框是在我循环浏览幻灯片时发生变化的东西

我已经写了一些代码来做这件事，但它不是很枯燥，它困扰着我。我有6个独立的函数，基本上是通过数组中的数字来运行的，我想知道是否有办法让代码更干净、更干练。你知道我能做些什么来改进吗

var quotes=document.querySelectorAll（“.quote”），
slideBg=document.queryselectoral（“.quote img”），
slideBtn=document.querySelectorAll（“.selector”），
headline=document.querySelector（“#quote head”）；
//------重置-----------------
函数重置（）{
for（var i=0；i引号1（）既然函数的作用完全相同，为什么不简单地向它传递一个参数呢。
因此，不要调用quote5（）调用报价（4）

function quote(param) {
  reset();
  quotes[param].classList.add("show");
  slideBg[param].classList.add("show");
  slideBtn[param].classList.add("active");
  headline.classList.remove("centralize");
}

既然函数的作用完全相同，为什么不简单地向它传递一个参数呢。
因此，不要调用quote5（）调用报价（4）

function quote(param) {
  reset();
  quotes[param].classList.add("show");
  slideBg[param].classList.add("show");
  slideBtn[param].classList.add("active");
  headline.classList.remove("centralize");
}

您可以这样最小化代码：

var quotes = document.querySelectorAll(".quote"),
slideBg = document.querySelectorAll(".quote-img"),
slideBtn = document.querySelectorAll(".selector"),
headline = document.querySelector("#quote-head");

//   --------------reset-----------------
function reset() {
    quotes.forEach((elem) => elem.classList.remove("show"));
    slideBg.forEach((elem) => elem.classList.remove("show"));
    slideBtn.forEach((elem) => elem.classList.remove("active"));
    headline.classList.add("centralize");
}

// ----------------Buttons---------------
function quote(index) {
  reset();
  quotes[index].classList.add("show");
  slideBg[index].classList.add("show");
  slideBtn[index].classList.add("active");
  headline.classList.remove("centralize");
}

// init
quote(index);

您可以这样最小化代码：

var quotes = document.querySelectorAll(".quote"),
slideBg = document.querySelectorAll(".quote-img"),
slideBtn = document.querySelectorAll(".selector"),
headline = document.querySelector("#quote-head");

//   --------------reset-----------------
function reset() {
    quotes.forEach((elem) => elem.classList.remove("show"));
    slideBg.forEach((elem) => elem.classList.remove("show"));
    slideBtn.forEach((elem) => elem.classList.remove("active"));
    headline.classList.add("centralize");
}

// ----------------Buttons---------------
function quote(index) {
  reset();
  quotes[index].classList.add("show");
  slideBg[index].classList.add("show");
  slideBtn[index].classList.add("active");
  headline.classList.remove("centralize");
}

// init
quote(index);

将索引作为参数传递给通用的
quote
函数<代码>函数quote（index）{reset（）；quotes[index].classList.add（“show”）；…etc}

将索引作为参数传递给泛型

quote

函数<代码>函数quote（index）{reset（）；quotes[index].classList.add（“show”）；…etc}谢谢！我试过了，但现在按钮完全停止工作，我在控制台上看到了这样一句话：“UncaughtTypeError:Cannotreadproperty'classList'of undefined”我对JS完全陌生。我应该在上面加上这个。如果这是一个有点愚蠢的回答，我道歉。我为一个愚蠢的打字错误感到非常抱歉。我在forEach循环中用“ele”代替“elem”。请参考已更正的代码。忽略！我刚想出来。谢谢你的帮助！谢谢你！我试过了，但现在按钮完全停止工作，我在控制台上看到了这样一句话：“UncaughtTypeError:Cannotreadproperty'classList'of undefined”我对JS完全陌生。我应该在上面加上这个。如果这是一个有点愚蠢的回答，我道歉。我为一个愚蠢的打字错误感到非常抱歉。我在forEach循环中用“ele”代替“elem”。请参考已更正的代码。忽略！我刚想出来。谢谢你的帮助！