点击触发opacity递减函数故障排查及网格元素独立控制需求

需求与问题 #

需求是实现Etch-a-Sketch网格中，每个div在鼠标hover时，每次触发事件opacity降低10%（从0.9开始，每次减0.1，直到变为0）。当前代码第一次能设置opacity为0.9，第二次变为0.8，但之后就卡在0.8无法继续递减，且全局变量方案会导致不同div的opacity起始值混乱。

问题代码 #

function toEternalDarkness(e) {
    let opacityValue = 9;
    let opacityDegree; 
    if (!e.target.style.opacity) {     
        opacityDegree = opacityValue / 10;   
        e.target.style.opacity = opacityDegree;
        console.log(opacityValue);
    } else if (opacityValue > 0) {
        opacityValue--;
        opacityDegree = opacityValue / 10;
        console.log(opacityDegree);
        e.target.style.opacity = opacityDegree;        
    } else {return}
}

问题根源 #

1. 函数内每次触发都会重新声明let opacityValue = 9，导致每次进入函数时这个变量都被重置为9。第一次设置后，第二次进入else if分支时opacityValue减到8，设置0.8，但第三次触发时，opacityValue又变回9，此时元素已有opacity值，所以再次减到8，重复设置0.8，陷入循环。
2. 没有为每个独立的div存储专属的进度状态，无法跟踪每个元素当前的opacity步数。

解决方案 #

• 利用元素的**自定义数据属性（data-*）**来存储每个div的当前opacity步数，确保每个元素的状态独立。
• 每次触发事件时，先读取元素的data-opacity-step值：
  • 如果不存在，初始化为9（对应opacity 0.9）
  • 如果存在且大于0，就将步数减1
  • 当步数减到0时，直接设置opacity为0，不再处理
• 计算对应的opacity值并赋值给元素，同时更新自定义属性的值。

修正后的代码 #

function toEternalDarkness(e) {
    const target = e.target;
    // 获取当前步数，没有则初始化为9
    let currentStep = parseInt(target.dataset.opacityStep) || 9;
    
    if (currentStep <= 0) {
        target.style.opacity = '0';
        return;
    }
    
    // 计算当前opacity值
    const opacityDegree = currentStep / 10;
    target.style.opacity = opacityDegree;
    // 更新步数，减1后存回自定义属性
    target.dataset.opacityStep = currentStep - 1;
}

说明 #

• 每个div的进度通过data-opacity-step属性独立存储，不会互相干扰。
• 第一次hover时，元素没有data-opacity-step，所以初始化为9，设置opacity为0.9，之后每次hover步数减1，opacity对应减0.1，直到步数为0时设置opacity为0。

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