本文介绍使用原生 JavaScript 根据父容器的 data-difficulty 属性值，动态为指定数量的子元素（.difficulty-item）添加 active 类，无需 jQuery，简洁高效且兼容现代浏览器。
本文介绍使用原生 javascript 根据父容器的 `data-difficulty` 属性值，动态为指定数量的子元素（`.difficulty-item`）添加 `active` 类，无需 jquery，简洁高效且兼容现代浏览器。
在构建评分、难度选择或星级组件时，常需根据父级数据状态控制子项样式。例如，data-difficulty="3" 表示应激活前 3 个 .difficulty-item 元素。以下方案完全基于原生 DOM API，避免依赖 jQuery，语义清晰、性能良好。
✅ 核心实现逻辑
使用 document.querySelectorAll('.difficulty-wrapper') 获取所有难度容器，遍历每个容器：
- 读取 dataset.difficulty 获取数值（默认为 0，防止 undefined 导致异常）；
- 查询全部子项并转换为数组，再用 slice(0, difficulty) 截取前 N 个；
- 对截取后的元素逐一调用 classList.add('active')。
document.querySelectorAll('.difficulty-wrapper').forEach(wrapper => {
const difficulty = parseInt(wrapper.dataset.difficulty, 10) || 0;
const items = wrapper.querySelectorAll('.difficulty-item');
// 安全限制：只处理存在的子项，避免越界
for (let i = 0; i < Math.min(difficulty, items.length); i++) {
items[i].classList.add('active');
}
});? 为什么用 parseInt(..., 10)？
dataset.difficulty 返回字符串（如 "4"），直接比较或运算可能引发隐式类型转换错误；显式转为十进制整数更健壮。同时通过 Math.min() 防止 difficulty 超出子项总数，避免 items[i] 为 undefined 报错。
? 示例样式（可选但推荐）
配合以下 CSS，可直观呈现激活效果：
.difficulty-wrapper {
display: flex;
gap: 2px;
}
.difficulty-wrapper:not(:last-child) {
margin-bottom: 2px;
}
.difficulty-item {
width: 48px;
height: 32px;
border-radius: 2px;
background-color: #ffeb3b; /* 浅黄 */
border: 1px solid #f44336; /* 红边 */
transition: background-color 0.2s ease;
}
.difficulty-item.active {
background-color: #2196f3; /* 激活蓝 */
}⚠️ 注意事项与最佳实践
-
DOM 加载时机：确保脚本在 DOM 渲染完成后执行，推荐包裹在 DOMContentLoaded 事件中：
document.addEventListener('DOMContentLoaded', () => { // 上述逻辑放在此处 }); - 动态更新支持：若后续通过 JS 修改 data-difficulty，需重新执行该逻辑（可封装为函数如 updateDifficultyActive() 并按需调用）。
- 无障碍友好性：如用于交互控件，建议补充 aria-current="true" 或 role="img" 等属性提升可访问性。
- 浏览器兼容性：dataset、forEach、querySelectorAll 均支持 IE11+，如需兼容 IE9/10，可用 getAttribute('data-difficulty') 替代 dataset.difficulty，并用传统 for 循环替代 forEach。
该方案轻量、可维护性强，适用于任何类似“父控子显”的场景——无论是难度标尺、进度指示器还是多步骤导航，均可快速复用与扩展。
