如何实现点击不同div时各自的点击计数器从0开始计数？

核心问题是全局变量order被所有div共享，导致切换div时计数无法独立重置。可以利用元素的**自定义数据属性（dataset）**为每个div单独存储点击次数，无需额外创建大量变量。

优化后的代码 #

function changeColour(item) {
    // 获取当前元素的点击计数，初始为0
    let count = parseInt(item.dataset.clickCount) || 0;
    count++;
    
    // 定义颜色序列，索引0对应初始状态，8次点击后通过取模回到初始
    const colors = ['LightSlateGray', 'red', 'Green', 'Blue', 'Orange', 'Yellow', 'Purple', 'Black'];
    // 计算当前颜色索引：count对8取模，实现循环切换
    const colorIndex = count % 8;
    item.style.backgroundColor = colors[colorIndex];
    
    // 更新元素的点击计数存储
    item.dataset.clickCount = count;
}

关键说明 #

• 自定义数据属性：通过item.dataset.clickCount为每个div单独保存点击次数，不同div的计数完全独立，切换时不会互相干扰。
• 颜色数组简化逻辑：把颜色序列放进数组替代大量if-else，代码更简洁易维护，后续增减颜色只需修改数组即可。
• 取模实现循环：count % 8让计数超过8后自动回到0，无需手动判断重置，完美实现8次点击恢复初始颜色的需求。

额外注意 #

确保你的div初始背景色设置为LightSlateGray，比如在HTML里直接设置：

<div onclick="changeColour(this)" style="background-color: LightSlateGray;">示例div</div>

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