JS轮播图片画廊点击侧边图片切换仅首次生效问题求助

事件绑定是挂载在具体DOM节点上的，而非节点的类名属性。你仅在初始化时给首次匹配prev-pic/next-pic类的DOM节点绑定了点击事件，轮播更新类名后，新获得prev-pic/next-pic类的节点从未绑定过点击事件，因此点击无响应。

直接将点击事件绑定在父容器.gallery-container上，通过事件冒泡机制判断点击的目标元素是否为当前的前后切换图，无需每次轮播后重新绑定事件，代码更简洁稳定。

修改后的完整JS代码 #

const galleryContainer = document.querySelector('.gallery-container');
let galleryItems = document.querySelectorAll('.gallery-item');
let galleryArray = Array.prototype.slice.call(galleryItems); 

// 父容器事件委托，仅绑定1次即可
galleryContainer.addEventListener('click', function(e) {
  // 判断点击的是上一张图
  if (e.target.classList.contains('prev-pic')) {
    galleryArray.unshift(galleryArray.pop());
    updateGallery();
  }
  // 判断点击的是下一张图
  if (e.target.classList.contains('next-pic')) {
    galleryArray.push(galleryArray.shift());
    updateGallery();
  }
});

// Update css classes for gallery
function updateGallery() {
  galleryArray.forEach(el => {
    el.classList.remove('gallery-item-1', 'gallery-item-2', 'gallery-item-3', 'gallery-item-4', 'gallery-item-5', 'prev-pic', 'next-pic');
  });

  galleryArray.slice(0, 5).forEach((el, i) => {
    el.classList.add(`gallery-item-${i+1}`);
  });

  document.querySelector('.gallery-item.gallery-item-2').classList.add('prev-pic');
  document.querySelector('.gallery-item.gallery-item-4').classList.add('next-pic');
}

如果不想用事件委托，需要每次执行updateGallery时先解绑旧节点的事件，再给新的prev-pic/next-pic节点绑定事件，需要提前把事件处理函数抽成独立的引用，避免无法解绑导致内存泄漏。该方案需要额外维护事件绑定/解绑逻辑，更推荐使用事件委托方案。

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