实现测验游戏单选功能：点击选项添加/移除active类的问题

原代码的问题分析 #

1. answersList.children使用错误：answersList.children返回的是HTML元素集合（HTMLCollection），它本身没有classList属性，不能直接调用contains('active')判断是否有选中选项。
2. 逻辑不符合单选需求：原代码的条件判断逻辑混乱，无法实现“点击选项时添加active类，同时移除其他已选中选项的active类”的核心需求。

修正后的代码实现 #

以下是两种常见的单选逻辑方案，你可以根据需求选择：

方案1：支持取消选中（点击已选中的选项可取消）

answersList.addEventListener('click', (e) => {
    // 确保点击目标是li选项（兼容li内部有子元素的情况）
    const option = e.target.closest('li');
    if (!option) return;

    // 找到当前已选中的选项
    const activeOption = answersList.querySelector('.active');

    // 如果已选中的不是当前点击的选项，移除它的active类
    if (activeOption && activeOption !== option) {
        activeOption.classList.remove('active');
    }

    // 切换当前选项的选中状态
    option.classList.toggle('active');
});

方案2：强制单选（只能选一个，无法取消选中）

answersList.addEventListener('click', (e) => {
    const option = e.target.closest('li');
    if (!option) return;

    // 移除所有选项的active类
    answersList.querySelectorAll('li').forEach(item => {
        item.classList.remove('active');
    });

    // 给当前点击的选项添加active类
    option.classList.add('active');
});

关键细节说明 #

• 使用e.target.closest('li')：避免点击li内部的子元素（如文本、图标）时，无法正确获取选项元素的问题。
• querySelector('.active')：快速定位当前已选中的选项（单选场景下只会有一个）。
• querySelectorAll('li').forEach()：遍历所有选项，统一移除active类，适合强制单选的场景。

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