如何基于父元素的data属性为子元素添加active类

原生JavaScript实现 #

直接按逻辑逐步处理：遍历所有难度容器，根据容器的data-difficulty值，给对应数量的子元素加上active类：

// 获取所有难度容器
const wrappers = document.querySelectorAll('.difficulty-wrapper');

wrappers.forEach(wrapper => {
  // 获取当前容器的难度值，转为数字类型
  const difficulty = parseInt(wrapper.dataset.difficulty);
  // 获取当前容器下的所有难度项
  const items = wrapper.querySelectorAll('.difficulty-item');
  
  // 先清空所有项的active类（避免重复执行时样式混乱）
  items.forEach(item => item.classList.remove('active'));
  
  // 给前N个难度项添加active类
  for(let i = 0; i < difficulty; i++) {
    if(items[i]) { // 处理难度值超过子元素数量的边界情况
      items[i].classList.add('active');
    }
  }
});

jQuery实现 #

借助jQuery的选择器和链式调用，代码更简洁：

$('.difficulty-wrapper').each(function() {
  // 获取当前容器的难度值
  const difficulty = parseInt($(this).data('difficulty'));
  // 先移除当前容器下所有项的active类
  $(this).find('.difficulty-item').removeClass('active');
  // 给前N个项添加active类
  $(this).find('.difficulty-item').slice(0, difficulty).addClass('active');
});

关键注意点 #

• 先移除所有active类是为了避免重复执行代码时，样式出现叠加错误
• 把data-difficulty转为数字类型，防止字符串比对导致逻辑错误
• 原生JS里的if(items[i])判断，是为了兼容难度值大于子元素数量的异常情况

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