我的代码有什么问题，单击事件仅触发一次 JavaScript？

Question

循环只工作一次，然后什么也没有发生。我有三个推荐，只能前进或后退一次。谢谢帮助！

const nextBtn = document.querySelector(".next-btn");
const prevBtn = document.querySelector(".prev-btn");
const testimonials = document.querySelectorAll(".testimonial");

let index = 0;
window.addEventListener("DOMContentLoaded", function () {
  show(index);
});
function show(index) {
  testimonials.forEach((testimonial) => {
    testimonial.style.display = "none";
  });
  testimonials[index].style.display = "flex";
}

nextBtn.addEventListener("click", function () {
  index++;
  if (index > testimonials.length - 1) {
    index = 0;
  }
  show(index);
});

prevBtn.addEventListener("click", function () {
  index--;
  if (index < 0) {
    index = testimonials.length - 1;
  }
  show(index);
});

Answer 1

我会使用“隐藏”类来隐藏非活动的推荐，而不是直接操作元素的样式。此外，您的导航逻辑可以简化为模运算。

您最初发布的代码似乎运行良好，但它似乎充满了冗余（代码重用）。它还缺乏结构化流程（可读性）。

const
  modulo = (n, m) => (m + n) % m,
  moduloWithOffset = (n, m, o) => modulo(n + o, m);

const
  nextBtn = document.querySelector('.next-btn'),
  prevBtn = document.querySelector('.prev-btn'),
  testimonials = document.querySelectorAll('.testimonial');

let index = 0;

const show = (index) => {
  testimonials.forEach((testimonial, currIndex) => {
    testimonial.classList.toggle('hidden', currIndex !== index)
  });
}

const navigate = (amount) => {
  index = moduloWithOffset(index, testimonials.length, amount);
  show(index);
}

// Create handlers
const onLoad = (e) => show(index);
const onPrevClick = (e) => navigate(-1);
const onNextClick = (e) => navigate(1);

// Add handlers
window.addEventListener('DOMContentLoaded', onLoad);
nextBtn.addEventListener('click', onNextClick);
prevBtn.addEventListener('click', onPrevClick);

.testimonial {
  display: flex;
}

.testimonial.hidden {
  display: none;
}

<div>
  <button class="prev-btn">Prev</button>
  <button class="next-btn">Next</button>
</div>
<div>
  <div class="testimonial">A</div>
  <div class="testimonial">B</div>
  <div class="testimonial">C</div>
  <div class="testimonial">D</div>
  <div class="testimonial">E</div>
  <div class="testimonial">F</div>
</div>