如何在forEach中定位NodeList的下一个元素？轮播激活点切换问题

你的代码逻辑存在问题：用forEach遍历所有圆点时，会移除每个圆点的激活类，同时给每个圆点的下一个元素都添加激活类，这会导致所有后续圆点被错误激活，而且最后一个圆点的nextElementSibling是null，还会触发报错。

正确的实现逻辑应该是找到当前激活的圆点，切换到它的下一个（或回到第一个），代码如下：

const bulletPoints = document.querySelectorAll('.dot')
const arrowRight = document.querySelector('.arrow_right')

arrowRight.addEventListener('click', function(event) {
  event.stopPropagation()
  console.log('arrow right click')
  
  // 找到当前激活的圆点
  const activeDot = document.querySelector('.dot_selected')
  if (!activeDot) return // 如果没有激活的圆点，直接返回（比如初始状态）
  
  // 移除当前激活类
  activeDot.classList.remove('dot_selected')
  
  // 确定下一个要激活的圆点
  let nextDot = activeDot.nextElementSibling
  // 如果当前是最后一个圆点，下一个回到第一个
  if (!nextDot || !nextDot.classList.contains('dot')) {
    nextDot = bulletPoints[0]
  }
  
  // 给下一个圆点添加激活类
  nextDot.classList.add('dot_selected')
})

补充说明： #

• 用document.querySelector('.dot_selected')精准定位当前激活的圆点，避免遍历所有元素做无用操作
• 判断nextElementSibling是否存在且属于圆点元素（防止相邻元素不是圆点的情况），如果不存在就回到第一个圆点，实现循环切换
• 初始状态如果没有激活的圆点，可以在页面加载时给第一个圆点加上dot_selected类，保证逻辑正常运行

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