本文介绍一种基于 HTML dataset 属性的轻量级方案，为每个具有相同 class 的网格项（grid item）维护独立点击计数，支持动态扩展至任意数量（如 100+），避免冗余变量与重复绑定事件。

本文介绍一种基于 html `dataset` 属性的轻量级方案，为每个具有相同 class 的网格项（grid item）维护独立点击计数，支持动态扩展至任意数量（如 100+），避免冗余变量与重复绑定事件。

在构建可交互网格（如图片轮播拼图、状态切换面板）时，一个常见需求是：为每个网格单元单独记录点击次数，并据此触发样式或状态变更（例如循环切换三张背景图）。原始代码通过为每个 #grid1 到 #grid9 单独声明变量和事件监听器实现，但该方式存在严重可维护性问题——当网格规模扩大至 100 个甚至更多时，手动编写变量、ID 和事件绑定将变得不可行。

理想解法应满足三点：
✅ 状态隔离：每个网格项拥有独立计数器，互不干扰；
✅ 动态可扩展：无需修改逻辑即可支持任意数量网格；
✅ 语义化存储：状态数据紧耦合于 DOM 元素本身，清晰且易调试。

✅ 推荐方案：利用 dataset + 事件委托（或单元素监听）

核心思路是将点击计数直接存储在对应 <div> 元素的 <code>data-times-clicked 属性中，并通过 dataset API 安全读写。这样既消除了全局变量数组的复杂管理，又天然实现了“每格一计数”。

以下为精简、可复用的现代 JavaScript 实现（无需 jQuery）：

<div class="grid-container"></div>
<button id="addBtn">添加新网格项</button>

// 工具函数：批量查询并转为数组
const $ = (query) => [...document.querySelectorAll(query)];

// 配置项
const GRID_COUNT = 9;
const gridContainer = $(".grid-container")[0];

// 点击处理函数 —— 每次调用都作用于当前被点击的元素
const handleGridClick = (e) => {
  const el = e.target;
  const count = el.dataset.count || 'unknown';
  const current = parseInt(el.dataset.timesClicked) || 0;
  const next = current + 1;

  // 更新 data 属性
  el.dataset.timesClicked = next;

  // 控制台日志（便于调试）
  console.log(`网格 #${count} 已点击 ${next} 次`);

  // ✨ 示例：根据点击次数模 3 切换背景类名（slika1 → slika2 → slika3 → ...）
  const cycle = ['slika1', 'slika2', 'slika3'];
  const nextClass = cycle[next % 3];

  // 移除旧类，添加新类（更健壮的写法）
  el.classList.remove(...cycle);
  el.classList.add(nextClass);
};

// 创建单个网格项
const createGridItem = () => {
  const item = document.createElement('div');
  item.className = 'grid-item slika1'; // 默认初始状态
  item.dataset.count = gridContainer.children.length; // 自动编号
  item.dataset.timesClicked = '0';
  item.textContent = gridContainer.children.length + 1;

  item.addEventListener('click', handleGridClick);
  gridContainer.appendChild(item);
};

// 初始化 9 个网格项
for (let i = 0; i < GRID_COUNT; i++) {
  createGridItem();
}

// 支持运行时动态添加（如点击按钮新增）
$('#addBtn')[0].addEventListener('click', createGridItem);

⚠️ 关键注意事项

• 避免使用 id 或全局变量索引：原始方案依赖 #grid1~#grid9 和 clicks1~clicks9，违反 DRY 原则且无法扩展；
• dataset 是首选存储位置：比 data-* 属性操作更安全（自动类型转换）、比 localStorage 更局部、比闭包更易追踪；
• CSS 类切换建议使用 classList：相比反复 removeClass/addClass，el.classList.replace(old, new) 或先 remove(...all) 再 add(next) 更简洁可靠；
• 若需兼容旧浏览器：dataset 在 IE11+ 完全支持；如需支持 IE10-，可用 getAttribute('data-times-clicked') + setAttribute() 替代。

✅ 总结

通过将状态内聚于 DOM 元素自身（data-times-clicked），配合事件监听器的闭包特性，我们实现了：

• ✅ 零全局计数变量
• ✅ O(1) 新增网格项成本
• ✅ 清晰可读的调试输出（console.log 显示具体编号与次数）
• ✅ 可无限扩展的响应式网格系统

从此，无论是 9 格还是 1000 格，只需调用 createGridItem()，一切状态管理自动就绪。