JS点击next按钮仅可切换一次图片 数组元素渲染页面问题求助

问题根因 #

你每次触发next按钮点击事件时，都会通过innerHTML重写imgPreview容器的全部内容，初始绑定了点击事件的nextBtn会被新渲染出来的next按钮完全替换，新生成的按钮没有绑定任何点击事件，因此只有第一次点击能生效，后续点击的都是未绑定事件的新按钮，自然没有响应。

修复方案 #

方案1：仅替换预览图src（最推荐） #

不需要每次重渲染整个img-div结构，直接修改现有预览图片的src属性即可，完全避免DOM节点替换导致的事件丢失问题，代码如下：

// 提前在公共作用域定义count和图片数组
let count = 0;
const imgArr = [/* 此处填入你的图片地址数组 */];

nextBtn.addEventListener('click', () => {
  count++;
  // 用数组长度替代硬编码的4，后续增减图片无需修改判断逻辑
  if (count >= imgArr.length) {
    count = 0;
  }
  // 直接修改现有预览图的src
  document.getElementById('image-1-preview').src = imgArr[count];
  console.log(count);
});

如果要实现向前切换的prev按钮，逻辑完全一致，只需把count++改为count--，判断条件改为if (count < 0) count = imgArr.length - 1即可。

方案2：事件委托（适合动态渲染按钮场景） #

如果业务需要必须动态渲染切换按钮，可以把点击事件绑定在不会被替换的父级容器imgPreview上，通过事件冒泡触发切换逻辑，无需重复绑定单个按钮的事件：

let count = 0;
const imgArr = [/* 此处填入你的图片地址数组 */];

// 事件绑定到不会被重写的父容器
imgPreview.addEventListener('click', (e) => {
  // 判断点击的是next按钮
  if (e.target.classList.contains('next-btn')) {
    count++;
    count >= imgArr.length && (count = 0);
    document.getElementById('image-1-preview').src = imgArr[count];
  }
  // 后续新增prev按钮逻辑直接在这里加判断即可
  if (e.target.classList.contains('prev-btn')) {
    count--;
    count < 0 && (count = imgArr.length - 1);
    document.getElementById('image-1-preview').src = imgArr[count];
  }
})

方案3：每次渲染后重新绑定事件（不推荐） #

如果坚持要每次重写整个img-div结构，需要在每次渲染完成后重新获取新生成的nextBtn元素，重新绑定点击事件。但该方案会频繁操作事件绑定，容易出现内存泄漏，仅做参考不建议使用。

内容的提问来源于stack exchange，提问作者Nulaxz