使用JS为HTML指定class的div绑定自定义属性值失败该如何解决？

直接使用事件委托结合DOM自定义属性取值实现需求，示例代码如下：

document.addEventListener('click', function(e) {
  // 匹配点击的content2元素
  if (e.target.classList.contains('content2')) {
    // 查找当前点击项对应的行容器，适配动态生成的card组件
    const currentRow = e.target.closest('.row.row-paddingless');
    if (!currentRow) return;

    // 取值并绑定已完成数值
    const completedNum = currentRow.querySelector('.completed').dataset.completed;
    currentRow.querySelector('.compValue').textContent = completedNum;

    // 取值并绑定未完成数值
    const notCompletedNum = currentRow.querySelector('.Not-completed').dataset.notCompleted;
    currentRow.querySelector('.noncompValue').textContent = notCompletedNum;

    // 后续进度条开发可直接复用上面两个数值计算比例
    // const total = Number(completedNum) + Number(notCompletedNum);
    // const progressPercent = ((completedNum / total) * 100).toFixed(1) + '%';
  }
})

注意事项 #

• 纯文本赋值优先用textContent而非innerHTML，性能更高且可避免XSS注入风险
• 注意class大小写严格匹配：HTML中已完成标签的class为小写的completed，选择器不要写成大写开头的Completed
• 若card为动态渲染的组件，必须使用事件委托的方式绑定事件，不要直接给动态生成的content2元素绑定click事件，避免元素未生成时绑定失效的问题
• 自定义属性取值规则：HTML中data-xxx属性对应DOM的dataset.xxx，短横线分隔的属性名会自动转驼峰，你现有HTML的自定义属性写法符合规则无需调整

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