基于数组实现点击切换Div背景的JavaScript导航功能故障排查

嘿，我帮你找出问题所在啦！你这个背景切换功能没达到预期效果，主要是两个关键问题在搞鬼，咱们一步步来修正：

问题排查 #

1. 条件判断用错了运算符
   你在if (i = 0)和else if (i = 4)里用的是=（赋值运算符），这不是在判断i的值，而是直接把i改成0或者4了！正确的做法是用===（严格相等运算符）来做判断，这样才会检查i是否等于目标值。

2. 逻辑顺序混乱且冗余
   原有的if-else分支写得太绕，而且顺序有问题：你先设置当前i对应的背景，再把i加1，最后显示的序号是更新后的i+1，这会导致背景图和显示的序号不匹配——比如初始i=0（对应01/05），点击后背景还是第1张，却显示02/05，完全对不上。

修正后的代码 #

咱们简化逻辑，用取模运算实现自动循环切换，同时调整顺序让背景和序号完美对应：

var designNextBg = document.getElementById('js-nextbg');
var designBg = document.getElementById('js-designBg');
var designBgArray = [
 'url(images/ipb.png)',
 'url(images/ipg.png)',
 'url(images/ipr.png)',
 'url(images/ipw.png)',
 'url(images/ipy.png)'
];
var positionBg = document.getElementById('js-positionBg');
var i = 0; // 初始对应第1张图，显示01/05

designNextBg.addEventListener('click', function(e) {
  // 先更新索引：点击后切换到下一张，最后一张之后回到开头
  i = (i + 1) % designBgArray.length;
  
  // 设置当前索引对应的背景图
  designBg.style.backgroundImage = designBgArray[i];
  
  // 更新位置文本，数组索引从0开始，所以序号要+1
  var currentNum = i + 1;
  positionBg.innerHTML = "0" + currentNum + "/05";
});

如果还要支持左边的上一张按钮，直接加这段逻辑就行：

var designPrevBg = document.getElementById('js-prevbg');
designPrevBg.addEventListener('click', function(e) {
  // 上一张逻辑：如果当前是第1张，切换到最后一张
  i = (i - 1 + designBgArray.length) % designBgArray.length;
  
  designBg.style.backgroundImage = designBgArray[i];
  
  var currentNum = i + 1;
  positionBg.innerHTML = "0" + currentNum + "/05";
});

为啥这么改？ #

• 用(i + 1) % designBgArray.length能自动处理循环：当i是最后一个索引（4）时，4+1=5，5除以5余0，直接回到第1张，不用写一堆if判断。
• 上一张的逻辑里加了designBgArray.length，是为了避免i变成负数（比如初始i=0时，0-1=-1，加上5变成4，直接跳到最后一张）。
• 现在点击按钮时，背景图和显示的序号完全对应，循环切换也能正常工作啦！

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