本文介绍一种基于 HTML dataset 属性的轻量级方案，为每个具有相同 class 的网格项（grid item）维护独立点击计数，支持动态扩展至任意数量（如 100+），避免冗余变量与重复绑定事件。
本文介绍一种基于 html `dataset` 属性的轻量级方案，为每个具有相同 class 的网格项（grid item）维护独立点击计数，支持动态扩展至任意数量（如 100+），避免冗余变量与重复绑定事件。
在构建可交互网格（如图片轮播拼图、状态切换面板）时，一个常见需求是：为每个网格单元单独记录点击次数，并据此触发样式或状态变更（例如循环切换三张背景图）。原始代码通过为每个 #grid1 到 #grid9 单独声明变量和事件监听器实现，但该方式存在严重可维护性问题——当网格规模扩大至 100 个甚至更多时，手动编写变量、ID 和事件绑定将变得不可行。
理想解法应满足三点：
✅ 状态隔离：每个网格项拥有独立计数器，互不干扰；
✅ 动态可扩展：无需修改逻辑即可支持任意数量网格；
✅ 语义化存储：状态数据紧耦合于 DOM 元素本身，清晰且易调试。
✅ 推荐方案：利用 dataset + 事件委托（或单元素监听）
核心思路是将点击计数直接存储在对应 以下为精简、可复用的现代 JavaScript 实现（无需 jQuery）： 通过将状态内聚于 DOM 元素自身（ 从此，无论是 9 格还是 1000 格，只需调用 <div> 元素的 <code>data-times-clicked 属性中，并通过 dataset API 安全读写。这样既消除了全局变量数组的复杂管理，又天然实现了“每格一计数”。<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 <h3>⚠️ 关键注意事项</h3>
id 或全局变量索引：原始方案依赖 #grid1~#grid9 和 clicks1~clicks9，违反 DRY 原则且无法扩展；dataset 是首选存储位置：比 data-* 属性操作更安全（自动类型转换）、比 localStorage 更局部、比闭包更易追踪；classList：相比反复 removeClass/addClass，el.classList.replace(old, new) 或先 remove(...all) 再 add(next) 更简洁可靠；dataset 在 IE11+ 完全支持；如需支持 IE10-，可用 getAttribute('data-times-clicked') + setAttribute() 替代。✅ 总结
data-times-clicked），配合事件监听器的闭包特性，我们实现了：
console.log 显示具体编号与次数） createGridItem()，一切状态管理自动就绪。
