点击按钮切换段落显示：移除上一段落.visible类的JS实现求助

你的核心问题是使用classList.toggle()导致同一元素被再次选中时类会被移除，且索引更新逻辑先于操作，导致初始状态不符合预期。以下是修正后的代码和说明：

修正后的JavaScript代码 #

const btn = document.getElementById('btn');
const txt = document.querySelectorAll('.text');
let currentIndex = 0;

// 可选：默认激活第一个段落
txt[currentIndex].classList.add('visible');

btn.addEventListener('click', appearTxt);

function appearTxt() {
    // 移除上一个激活段落的类
    txt[currentIndex].classList.remove('visible');
    // 循环更新索引，到达最后一个后回到第一个
    currentIndex = (currentIndex + 1) % txt.length;
    // 给新段落添加激活类
    txt[currentIndex].classList.add('visible');
}

关键修改点 #

1. 替换toggle为remove+add：
   不再切换类的状态，而是明确移除上一个元素的类、给新元素添加类，确保每次只有一个段落有.visible类。
2. 调整索引更新逻辑：
   用(currentIndex + 1) % txt.length实现循环索引，比原三元运算符更简洁，逻辑清晰。
3. 初始化激活状态：
   可选给第一个段落默认添加.visible，让页面加载时就有激活状态（不需要的话可删除该行）。

原代码问题分析 #

• 原代码中counTxt初始为0，第一次点击先自增到1才执行操作，导致第一个段落永远不会被初始激活。
• toggle方法会在元素已有类时移除、没有时添加，循环到同一元素时会触发移除操作，不符合“始终只有一个激活段落”的需求。

内容的提问来源于stack exchange，提问作者Rika-em