通过Previous/Next按钮导航div时第三个div被忽略如何解决

问题根因 #

• ID重复违规：HTML规范要求页面内ID必须唯一，你给3个div内的前后按钮都使用了相同的next-btn、previous-btn ID，document.getElementById只会匹配到第一个div内的next按钮，切换到div2、div3后，内部的按钮没有绑定点击事件，点击无响应，自然无法触发切换到div3的逻辑。
• 计数逻辑偏差：页面初始状态默认显示div1，但你设置的初始计数i=0，第一次点击next后i=1，对应状态还是显示div1，相当于第一次点击没有生效，逻辑和初始状态冲突。

修正方案 #

方案1：将公共按钮外移（更推荐，避免重复元素） #

直接把前后按钮移到公共控制区，不需要每个div都重复放置按钮：

HTML代码

<div class="div1" id="div1" style="background-color: crimson"></div>
<div class="div2" id="div2" style="background-color: rgb(20, 220, 87)"></div>
<div class="div3" id="div3" style="background-color: rgb(113, 20, 220)"></div>

<div class="buttons-controller">
  <button id="previous-btn">previous</button>
  <button id="next-btn">next</button>
  <button id="first-div">1</button>
  <button id="second-div">2</button>
  <button id="third-div">3</button>
</div>

JS代码

const nextbtn = document.getElementById("next-btn");
const previousbtn = document.getElementById("previous-btn");
// 把所有待切换div存入数组，后续新增div不需要修改切换逻辑
const divList = [
  document.getElementById("div1"),
  document.getElementById("div2"),
  document.getElementById("div3")
];
// 初始显示第一个div，对应索引为0
let currentIndex = 0;

// 封装公共切换方法，复用性更高
function switchToDiv(targetIndex) {
  // 边界校验，避免超出div数量范围
  if (targetIndex < 0 || targetIndex >= divList.length) {
    console.log("已到达切换边界");
    return;
  }
  currentIndex = targetIndex;
  // 遍历所有div，仅显示目标索引对应的div
  divList.forEach((div, idx) => {
    div.style.display = idx === currentIndex ? "block" : "none";
  })
}

// 绑定next按钮事件
nextbtn.addEventListener("click", () => {
  switchToDiv(currentIndex + 1);
});

// 绑定previous按钮事件
previousbtn.addEventListener("click", () => {
  switchToDiv(currentIndex - 1);
});

// 可选：绑定底部数字快速跳转按钮
document.getElementById("first-div").addEventListener("click", () => switchToDiv(0));
document.getElementById("second-div").addEventListener("click", () => switchToDiv(1));
document.getElementById("third-div").addEventListener("click", () => switchToDiv(2));

CSS代码（和原有逻辑一致，无需修改）

body {
  display: flex;
  flex-wrap: wrap;
}
.div1,
.div2,
.div3 {
  width: 200px;
  height: 200px;
}
.div1 {
  display: block;
}
.div2,
.div3 {
  display: none;
}

方案2：保留每个div内的按钮 #

如果需要保留每个div内部的前后按钮，把按钮的id属性改为class，再批量绑定事件即可：

1. 把所有按钮的id="next-btn"改为class="next-btn"，id="previous-btn"改为class="previous-btn"
2. JS中批量绑定事件：

// 给所有next按钮绑定事件
document.querySelectorAll(".next-btn").forEach(btn => {
  btn.addEventListener("click", () => {
    switchToDiv(currentIndex + 1);
  })
})
// 给所有previous按钮绑定事件
document.querySelectorAll(".previous-btn").forEach(btn => {
  btn.addEventListener("click", () => {
    switchToDiv(currentIndex - 1);
  })
})

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