HTML实现课程难度过滤技巧

• 用户选“beginner”时，所有data-level不等于beginner的元素设为style.display = "none"
• 初始状态建议用document.querySelectorAll('[data-level]').forEach(el => el.style.display = 'block')重置，避免残留隐藏
• IE11不支持dataset访问带连字符的属性（如data-course-level得写成el.dataset.courseLevel）

filter()和classList配合更稳妥

比直接操作style.display更干净：给每个课程加统一类名如course-item，再用classList.add('filtered-out')配合CSS规则.filtered-out { display: none; }。这样JS只管开关类，样式逻辑完全解耦。

• 切换时用document.querySelectorAll('.course-item').forEach(...)，别漏掉动态插入的新课程节点
• 如果课程列表来自AJAX，记得在数据注入DOM后再执行过滤，否则查不到新节点
• 移动端反复切换可能触发重排，getComputedStyle读取前先用documentFragment批量操作更稳

服务端渲染才是真·过滤，但HTML结构得配合

如果后端已按难度分好数据（比如PHP吐出