本文介绍使用原生 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 <blockquote><p>? <strong>为什么用 parseInt(..., 10)？</strong><br>dataset.difficulty 返回字符串（如 "4"），直接比较或运算可能引发隐式类型转换错误；显式转为十进制整数更健壮。同时通过 Math.min() 防止 difficulty 超出子项总数，避免 items[i] 为 undefined 报错。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5980" title="javascript-pro"><img
src="https://img.php.cn/upload/skill/000/000/081/179074807567238.jpg" alt="javascript-pro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5980" title="javascript-pro" class="overflowclass">javascript-pro</a>
<p class="overflowclass">专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发</p>
</div>
<a rel="nofollow" href="/xiazai/skill5980" title="javascript-pro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></blockquote><h3>? 示例样式（可选但推荐）</h3><p>配合以下 CSS，可直观呈现激活效果：</p><pre class="brush:php;toolbar:false;">.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。
该方案轻量、可维护性强，适用于任何类似“父控子显”的场景——无论是难度标尺、进度指示器还是多步骤导航，均可快速复用与扩展。
