如何实现点击按钮逐个切换li元素颜色，上一个恢复绿色？

原代码存在两个核心问题：

• 循环中给按钮绑定了等同于li数量的点击事件，点击一次会触发多轮逻辑，导致状态混乱
• 仅给目标元素添加red类，但未清除上一个元素的red类，也未确保所有元素的green类正常生效

修正方案 #

首先确保CSS样式正确（控制颜色显示）：

.green { color: green; }
.red { color: red; }

修改JavaScript代码，只绑定一次点击事件，维护当前选中的索引，每次点击时重置状态再切换目标元素样式：

const lis = document.querySelectorAll('li');
const btn = document.querySelector('button');
let currentIndex = 0;

// 仅绑定一次点击事件，避免重复触发
btn.addEventListener('click', () => {
    // 先将所有li恢复为绿色样式
    lis.forEach(li => {
        li.classList.add('green');
        li.classList.remove('red');
    });
    // 给当前索引对应的li设置红色样式
    lis[currentIndex].classList.remove('green');
    lis[currentIndex].classList.add('red');
    // 更新索引，到达末尾后重置为0
    currentIndex = (currentIndex + 1) % lis.length;
});

简化优化版（仅修改必要元素，提升性能） #

通过维护上一个选中的元素，只操作两个元素的样式，避免遍历所有li：

const lis = document.querySelectorAll('li');
const btn = document.querySelector('button');
let prevSelectedLi = lis[0]; // 初始选中第一个li

btn.addEventListener('click', () => {
    // 恢复上一个选中元素的绿色样式
    prevSelectedLi.classList.remove('red');
    prevSelectedLi.classList.add('green');
    
    // 计算当前要选中的元素索引
    const currentIndex = (Array.from(lis).indexOf(prevSelectedLi) + 1) % lis.length;
    const currentSelectedLi = lis[currentIndex];
    
    // 设置当前元素的红色样式
    currentSelectedLi.classList.remove('green');
    currentSelectedLi.classList.add('red');
    
    // 更新上一个选中元素的记录
    prevSelectedLi = currentSelectedLi;
});

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