JavaScript操作classList添加类不生效，Quiz答题应用点击加类功能异常如何修复

问题根因 #

你当前代码存在4个核心错误导致效果不生效：

• HTML标记选项对错用的是value属性，但JS代码读取的是不存在的data-correct自定义属性，无法正确判断对错
• 事件绑定的父容器是.list_questions，遍历的是该容器的直接子元素<li>，而非实际的选项.option元素
• 即使拿到正确的对错标识，取到的是字符串格式的"0"/"1"，直接用if(correct)判断时"0"会被判定为真值，无法正确区分对错
• 没有过滤点击事件的触发源，点击选项以外的区域也会触发逻辑，导致逻辑混乱

修改步骤 #

第一步：调整HTML选项属性（两种方案二选一即可） #

方案1：把所有选项的value属性改为data-correct，适配现有JS的dataset读取逻辑：

<div class="option_one option" data-correct="1">Wydad</div>
<div class="option_two option" data-correct="0">Raja</div>
<div class="option_thre option" data-correct="0">Mat</div>
<div class="option_frour option" data-correct="0">Fus</div>

方案2：不改HTML，后续JS修改为读取value属性即可。

第二步：重写选项点击事件逻辑 #

替换你现有的选项点击相关JS代码为以下内容：

// 遍历所有题目容器
const questionContainers = document.querySelectorAll('.q_container');
questionContainers.forEach(container => {
  container.addEventListener('click', function(e) {
    // 只处理点击选项的场景
    if (!e.target.classList.contains('option')) return;
    // 获取当前题目下的所有选项
    const allOptions = container.querySelectorAll('.option');
    allOptions.forEach(option => {
      // 用方案1保留data-correct就写option.dataset.correct
      // 用方案2不改HTML就写option.getAttribute('value')
      const isCorrect = Boolean(Number(option.dataset.correct));
      setStatus(option, isCorrect);
    });
  })
})

function setStatus(option, correct) {
  if (correct) {
    option.classList.add('correct');
  } else {
    option.classList.add('in-correct');
  }
}

第三步：可选优化 #

如果需要实现「仅点击正确选项才触发所有选项对错标记」的逻辑，可以调整事件代码为：

container.addEventListener('click', function(e) {
  if (!e.target.classList.contains('option')) return;
  // 校验点击的选项是否正确
  const clickedIsCorrect = Boolean(Number(e.target.dataset.correct));
  if (!clickedIsCorrect) {
    // 点击错误选项的自定义逻辑，比如仅标记当前选项错误
    e.target.classList.add('in-correct');
    return;
  }
  const allOptions = container.querySelectorAll('.option');
  allOptions.forEach(option => {
    const isCorrect = Boolean(Number(option.dataset.correct));
    setStatus(option, isCorrect);
  });
})

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