本文介绍一种无需改动现有
html
结构即可为多道选择题各自独立管理答案高亮的
jquery
解决方案，通过精准定位父级容器来隔离各题干的交互逻辑。
在构建在线考试系统时，一个常见需求是：用户点击某道题的选项后，仅该题当前选中项被高亮，而其他题目已选答案不受影响。你当前的代码使用了全局选择器 $('.__QNnChoiceContainer .__choicesMLExam.__theAnswerMLExam') 移除高亮类，导致
所有题目中的高亮状态被一并清除
——这正是第二题出现“高亮错位”的根本原因。
✅ 正确思路：
作用域
隔离（Scope Isolation）
关键在于将操作限制在
当前点击选项所属的题目容器内
，而非全页面搜索。jQuery 提供了便捷的 DOM 遍历方法，我们可利用：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
$(this).parents('.ChoicesExam')：向上查找最近的 .ChoicesExam 容器（即本题所有选项的直接父容器）；
.find('.__choicesMLExam')：在该容器内查找全部选项；
再统一移除 __theAnswerMLExam 类，最后仅给当前点击项添加该类。
✅ 推荐实现代码（简洁、健壮、零HTML侵入）
? 使用 .closest() 替代 .parents() 更精准（返回第一个匹配祖先，而非所有祖先），语义更清晰且性能略优。
⚠️ 注意事项与最佳实践
事件委托优于循环绑定
：原代码对每个 .__QNnChoiceContainer 单独绑定事件，不仅冗余，还可能因动态插入新题而失效。改用 $('body').on('click', selector, handler) 是标准做法，天然支持后续动态添加的题目。
避免 ID 重复问题
：你 HTML 中多个 等存在重复 ID（违反 HTML 规范），虽不影响本方案运行，但建议改为 class 或使用 data-id 属性（如 data-option="a"）以确保可维护性与无障碍兼容性。
CSS 高亮样式已完备
：你提供的 :before
伪元素
标记方案完全可用，无需调整；确保 SVG 滤镜 #marker-shape 已正确定义（若未使用滤镜效果，可安全移除 filter:url(#marker-shape)）。
✅ 效果验证
点击第1题的「c. Grooved Pin」→ 仅第1题该选项高亮；
点击第2题的「d. Knurled Pin」→ 第1题高亮不变，第2题新选项高亮；
切换同一题不同选项 → 原高亮自动取消，新选项即时生效。
此方案彻底解耦各题干逻辑，扩展性强（支持无限追加题目），且完全不依赖 HTML 结构变更，是选择题交互开发中的推荐范式。
$('body').on('click', '.__choicesMLExam', function () {
// 1. 获取当前选项所在题目的 ChoicesExam 容器
const $examContainer = $(this).closest('.ChoicesExam');
// 2. 清空本题内所有选项的高亮状态
$examContainer.find('.__choicesMLExam').removeClass('__theAnswerMLExam');
// 3. 仅高亮当前点击项
$(this).addClass('__theAnswerMLExam');
});