如何为表格单个单元格设置局部计数器以独立切换背景图？

这个问题我太熟悉了，全局变量搞出来的共享状态确实坑人——所有单元格都用同一个i来计数，自然会出现点不同单元格时延续之前计数的情况。要让每个单元格独立跟踪自己的图片位置，咱们可以用*HTML5的data-自定义属性，给每个单元格单独存自己的计数状态，完美解决全局变量的问题。

修改后的代码实现 #

var table = document.getElementsByTagName('table')[0];
var def = ["tex/white.png", "tex/grass.jpg", "tex/stone.jpg", "tex/water.jpg", "tex/wood.jpg", "tex/lava.jpg"];
table.onclick = function(e) {
 var target = (e || window.event).target;
 if (target.tagName in { TD: 1, TH: 1 }) {
  target.className = "img";
  // 获取当前单元格的索引，无初始值则设为-1
  let currentIndex = parseInt(target.dataset.currentIndex) || -1;
  // 索引自增，用取余自动实现循环
  currentIndex = (currentIndex + 1) % def.length;
  // 设置背景图
  target.style.backgroundImage = `url(${def[currentIndex]})`;
  // 把更新后的索引存回单元格的data属性
  target.dataset.currentIndex = currentIndex;
 }
};

关键改动说明 #

• 删掉了全局的var i = 1;，再也不用担心状态共享了
• 用target.dataset.currentIndex存储每个单元格自己的当前图片索引，这是HTML标准支持的自定义属性，兼容性拉满
• 第一次点击单元格时，因为没有data-current-index属性，parseInt会返回NaN，我们用|| -1默认设为-1，加1后刚好是0，对应数组的第一张图，完美符合你“从数组起始位置开始切换”的需求
• 用(currentIndex + 1) % def.length替代原来的手动判断，一行代码搞定循环逻辑，简洁又不容易出错
• 每次更新索引后都存回data属性，下次点击该单元格时就能读取到正确的位置，实现完全独立的切换序列

这样改完之后，每个单元格的切换计数都是独立的，点A单元格不会影响B单元格的切换顺序啦～

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