多选题答题高亮跨题目干扰问题求助（不修改HTML）

问题根源 #

你遇到的问题本质是DOM操作或状态管理没有限定在单个题目容器内——比如点击选项时，用了全局选择器（如document.querySelectorAll('.option')）去修改高亮，或者用了全局变量存储选中状态，导致操作会影响所有题目里的选项。

具体解决方法 #

1. 事件处理时锁定当前题目容器

不管是直接绑定选项点击事件，还是用事件委托，都要先找到当前点击选项所属的题目父容器，再在这个容器内进行高亮操作，避免全局影响。

示例代码（原生JS）：

// 假设所有题目都包裹在#exam容器里，用事件委托绑定点击
document.getElementById('exam').addEventListener('click', function(e) {
  // 只处理选项元素的点击
  if (!e.target.matches('.option')) return;

  // 找到当前选项所属的题目容器（比如每个题目是带.question类的div）
  const currentQuestion = e.target.closest('.question');
  
  // 清除当前题目内所有选项的高亮
  currentQuestion.querySelectorAll('.option').forEach(opt => {
    opt.classList.remove('highlight');
  });
  
  // 给点击的选项添加高亮
  e.target.classList.add('highlight');
});

核心是用closest()精准定位当前题目容器，所有DOM操作都只在这个容器内执行，不会波及其他题目。

2. 为每个题目维护独立的选中状态

如果你的逻辑里用了变量记录选中选项，不要用全局变量，而是按题目ID或索引存储独立状态，确保每个题目的状态互不干扰。

示例代码：

// 用对象存储每个题目的选中选项键值对（key为题目标识，value为选项值）
const selectedAnswers = {};

document.getElementById('exam').addEventListener('click', function(e) {
  if (!e.target.matches('.option')) return;

  const currentQuestion = e.target.closest('.question');
  // 假设每个题目有自定义属性data-q-id作为唯一标识
  const questionId = currentQuestion.dataset.qId;
  const optionValue = e.target.dataset.optValue;

  // 更新当前题目的选中状态
  selectedAnswers[questionId] = optionValue;

  // 仅更新当前题目内的选项高亮
  currentQuestion.querySelectorAll('.option').forEach(opt => {
    opt.classList.toggle('highlight', opt.dataset.optValue === selectedAnswers[questionId]);
  });
});

3. 排查宽泛的CSS选择器（辅助）

如果高亮样式是通过CSS类实现的，确保没有写诸如.highlight这种无父容器限定的样式（不过这一般不会直接导致跨题干扰，主要还是JS逻辑的问题，但检查一下更稳妥）。

核心思路总结 #

• 所有DOM操作必须限定在当前题目容器的范围内，拒绝全局查找元素。
• 每个题目的选中状态要独立存储，禁止共享单一变量。
• 利用DOM的层级关系（closest()、容器内的querySelector）缩小操作边界。

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