jQuery处理动态Div下答题选项li的类移除问题

我看了你写的答题模块代码，发现几个语法和逻辑上的问题，导致无法正确移除指定的qoption类。下面帮你梳理问题并给出修正后的实现：

原代码的主要问题 #

• 循环逻辑错误：你定义的total_question是数字3，不是数组，所以total_question.length会返回undefined，循环根本不会执行；而且选择器写法有误，缺少连接符，比如$('#login-'+total_question[i] 'li')的语法不合法。
• 选择器转义错误：$("\.next")里的点不需要转义，直接写$(".next")即可。
• 处理范围冗余：没必要遍历所有题目，只处理当前点击的题目下的选项即可，这样更高效。

修正后的代码实现 #

$(document).on('click', '.qoption', function() {
    // 获取当前点击的选项元素
    const $currentOption = $(this);
    const chosenId = $currentOption.data('id');
    const correctId = $currentOption.data('m');
    // 获取当前题目下的所有选项容器
    const $questionOptions = $currentOption.closest('ul');

    // 标记选中和正确选项
    if (chosenId === correctId) {
        $currentOption.addClass('answered');
    } else {
        $currentOption.addClass('selected');
        $('#opt-' + correctId).addClass('answered');
    }

    // 显示下一题按钮
    $(".next").show();

    // 移除当前题目下已选中/已标记正确的选项的qoption类
    $questionOptions.find('li.selected, li.answered').removeClass('qoption');
});

代码说明 #

1. 精准定位当前题目：用closest('ul')快速获取当前选项所属的题目选项组，只处理当前题目的选项，避免不必要的全局遍历。
2. 简化选择器：使用jQuery的多选择器li.selected, li.answered直接定位需要移除类的元素，写法更简洁。
3. 修复语法问题：修正了选择器转义和循环逻辑的错误，同时用const替代var提升代码的可读性和作用域安全性。

如果需要遍历所有题目处理（比如切换题目时） #

如果你需要在某个时机（比如页面加载完成、切换题目）统一处理所有题目的选项，可以用下面的循环代码：

const totalQuestions = 3; // 题目总数
for (let i = 1; i <= totalQuestions; i++) {
    // 针对每一题，移除已选中/已标记正确选项的qoption类
    $('#login-' + i + ' li.selected, #login-' + i + ' li.answered').removeClass('qoption');
}

这样就能实现你需要的：点击选项时，移除带有selected或answered类的li元素的qoption类，避免重复选择的需求。

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