本文介绍一种无需改动html结构、仅通过优化jquery事件委托逻辑，即可让每道选择题的选项高亮互不干扰的解决方案，适用于含多个`.__qnnchoicecontainer`容器的在线考试系统。
在开发多题型选择题交互时，一个常见痛点是：当用户点击第2题选项时，第1题已选中的高亮样式被意外清除——这是因为原始代码使用全局选择器 $('.__QNnChoiceContainer .__choicesMLExam.__theAnswerMLExam') 移除了所有题目中已添加 __theAnswerMLExam 类的选项，导致跨题干扰。
根本问题在于作用域未隔离。正确做法是：将操作限制在当前题目所属的 .ChoicesExam 容器内，确保每道题的选中状态完全独立。
✅ 推荐解决方案：基于事件委托 + 局部作用域定位
改用 $('body').on('click', '.__choicesMLExam', ...) 进行事件委托（兼容动态插入题目），并在回调中通过 DOM 向上查找（.parents('.ChoicesExam')）精准定位当前题目的选项容器，再执行类操作：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
$('body').on('click', '.__choicesMLExam', function () {
// 1. 找到当前选项所在题目的 ChoicesExam 容器
const $examContainer = $(this).closest('.ChoicesExam');
// 2. 清除该容器内所有选项的高亮类
$examContainer.find('.__choicesMLExam').removeClass('__theAnswerMLExam');
// 3. 仅给当前点击项添加高亮类
$(this).addClass('__theAnswerMLExam');
});? 关键改进点： 使用 .closest('.ChoicesExam') 替代 .parents(...) 更语义清晰且健壮（避免误匹配外层嵌套）； 操作范围严格限定在单题容器内，彻底避免跨题污染； 无需修改任何 HTML 结构或增加额外 data 属性，零侵入式升级。
? 注意事项与最佳实践
- ID 重复问题需规避：当前 HTML 中多个 <span id="choicesAExamML"> 等存在重复 ID（违反 HTML 规范）。建议改为 class 或添加唯一后缀（如 id="choicesAExamML_1"），否则可能影响可访问性及未来扩展（如自动评分逻辑）；
- CSS 兼容性：::before 伪元素高亮依赖 position: relative 和 z-index: -1 实现背景覆盖，确保父级 .__choicesMLExam 无 overflow: hidden，否则高亮可能被裁剪；
- 移动端适配：若需支持触摸设备，可补充 touchstart 事件或使用 $(...).on('click touchstart', ...) 双触发；
- 性能提示：.closest() 和 .find() 均为高效 DOM 方法，即使题目数量达 50+ 仍可流畅运行。
✅ 效果验证
应用上述脚本后：
立即学习“前端免费学习笔记（深入）”；
- 点击题1选项 → 仅题1对应选项高亮；
- 点击题2选项 → 题1高亮自动消失，题2新选项高亮；
- 各题状态完全解耦，支持任意顺序作答与反复切换。
此方案兼顾简洁性、健壮性与可维护性，是多题型交互开发中的标准实践模式。
