本文介绍如何使用原生 JavaScript 根据父容器的 data-difficulty 属性值，自动为对应数量的子元素（.difficulty-item）添加 active 类，实现可视化难度标尺效果。
本文介绍如何使用原生 javascript 根据父容器的 `data-difficulty` 属性值，自动为对应数量的子元素（`.difficulty-item`）添加 `active` 类，实现可视化难度标尺效果。
在构建交互式 UI 组件（如难度选择器、评分控件或进度指示器）时，常需根据父级数据状态动态控制子元素样式。本方案完全脱离 jQuery，采用现代原生 DOM API 实现简洁、高效、可维护的逻辑。
核心实现逻辑
我们通过 document.querySelectorAll('.difficulty-wrapper') 获取所有难度容器，遍历每个容器：
- 读取其 data-difficulty 属性值（使用 wrapper.dataset.difficulty，自动转为字符串，需兼容默认值）；
- 查询内部所有 .difficulty-item 元素，并转换为数组；
- 使用 .slice(0, difficulty) 截取前 N 个元素（N 即难度值），避免越界或 NaN 导致异常；
- 对截取后的元素批量添加 active 类。
以下是完整可运行的 JavaScript 代码：
document.querySelectorAll('.difficulty-wrapper').forEach(wrapper => {
const difficulty = parseInt(wrapper.dataset.difficulty) || 0;
const items = wrapper.querySelectorAll('.difficulty-item');
// 确保只处理合法数量（非负整数，且不超过子项总数）
const count = Math.max(0, Math.min(difficulty, items.length));
items.forEach((item, index) => {
item.classList.toggle('active', index < count);
});
});✅ 优化说明：相比原始答案，此处使用 parseInt() 显式转换并配合 Math.max/min 做边界校验，防止 data-difficulty="abc" 或负值导致意外行为；同时用 toggle('active', condition) 替代 add()，确保状态纯净——即使多次执行也不会重复叠加 active 类。
配套 CSS 示例
为直观呈现效果，建议搭配以下基础样式（支持 Flex 布局与状态高亮）：
.difficulty-wrapper {
display: flex;
gap: 2px;
margin-bottom: 4px;
}
.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; /* 激活态蓝色 */
border-color: #1976d2;
}注意事项与最佳实践
- 属性健壮性：始终对 dataset 值做类型转换与范围校验，避免 NaN 或 undefined 引发逻辑错误；
- DOM 就绪时机：确保脚本在 DOM 加载完成后执行（推荐放在 <body> 底部，或使用 DOMContentLoaded 事件）；
- 可扩展性：若后续需支持动态更新（如用户拖动调整难度），可封装为函数并监听相关事件；
- 无障碍友好：建议为 .difficulty-item 添加 role="img" 和 aria-label（例如 aria-label="难度等级 ${index + 1}"），提升可访问性。
该方案轻量、无依赖、语义清晰，适用于任何基于数据驱动样式的场景，是现代前端开发中推荐的 DOM 操作范式。
