javascript - 除了数组中的数字之外，我有多个具有相同代码的函数。这段代码可以是 DRY-er 吗？

Question

我基本上正在构建这个幻灯片放映，底部有可单击的按钮，可让您浏览幻灯片。当我循环浏览幻灯片时，背景、 block 引用和按钮上的小边框都会发生变化。

我已经编写了一些代码来做到这一点，但它不是很干，这让我很困扰。我有 6 个独立的函数，它们基本上运行数组中的数字，我想知道是否有一种方法可以使这段代码更加干净和干燥。知道我可以做些什么来改善这一点吗？

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

//   --------------reset-----------------
function reset() {
  for (var i = 0; i < quotes.length; i++) {
    quotes[i].classList.remove("show");
  }
  for (var i = 0; i < slideBg.length; i++) {
    slideBg[i].classList.remove("show");
  }
  for (var i = 0; i < slideBtn.length; i++) {
    slideBtn[i].classList.remove("active");
  }
  headline.classList.add("centralize");
}

// ----------------Buttons---------------
function quote1() {
  reset();
  quotes[0].classList.add("show");
  slideBg[0].classList.add("show");
  slideBtn[0].classList.add("active");
  headline.classList.remove("centralize");
}
function quote2() {
  reset();
  quotes[1].classList.add("show");
  slideBg[1].classList.add("show");
  slideBtn[1].classList.add("active");
  headline.classList.remove("centralize");
}
function quote3() {
  reset();
  quotes[2].classList.add("show");
  slideBg[2].classList.add("show");
  slideBtn[2].classList.add("active");
  headline.classList.remove("centralize");
}
function quote4() {
  reset();
  quotes[3].classList.add("show");
  slideBg[3].classList.add("show");
  slideBtn[3].classList.add("active");
  headline.classList.remove("centralize");
}
function quote5() {
  reset();
  quotes[4].classList.add("show");
  slideBg[4].classList.add("show");
  slideBtn[4].classList.add("active");
  headline.classList.remove("centralize");
}
function quote6() {
  reset();
  quotes[5].classList.add("show");
  slideBg[5].classList.add("show");
  slideBtn[5].classList.add("active");
  headline.classList.remove("centralize");
}

// init
quote1();

此外，图片提供了更直观的引用:

我也想让它自动滚动，所以只要有 1 行代码就可以运行数组就太棒了。

Answer 1

您可以像这样最小化代码:

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