jQuery在线答题系统问题：如何实现点击跳转至下一题？

我正在搭建一个在线答题网站，用户选择答案后会显示「下一题」按钮。尝试通过DOM遍历结合hide()和show()函数实现跳转功能，但未成功。

HTML代码 #

<article id="Pdiv">
    <div id="Q1" >
        <p id="cap" class="color"><b>What is the capital of Brazil?</b> </p>
        <p id="A1" class="answer"><button id="a"><b>Brasilia</b></button> <button class="a"><b>Sao Paulo</b></button></p>
    </div>
    <div id="Q2" >
        <p id="sa" class="color"> <b>How many states are in the USA?</b> </p>
        <p id="A2" class="answer"><button id="b"><b>50</b></button> <button class="b"><b>300</b></button></p>
    </div>
    <div id="Q3" >
        <p id="pas" class="color"> <b>What is the longest river in the world?</b> </p>
        <p  id="A3" class="answer"><button id="c"><b>The Nile river</b></button> <button class="c"><b>The Amazon river</b></button></p>
    </div>
    <div id="Q4" >
        <p id="Cap" class="color"> <b>What is the world's deepest river?</b> </p>
        <p class="answer"><button id="d"><b>The Congo River</b></button> <button class="d"><b>The Marianas trench</b></button></p>
    </div>
    <div id="Q5" >
        <p id="caap" class="color"> <b>What is the world's largest rainforest?</b> </p>
        <p class="answer"><button id="e"><b>The Amazon rainforest</b></button> <button class="e"><b>The Congo rainforest</b></button></p>
    </div>
    <div id="Q6" >
        <p id="capp" class="color"> <b>What is the fastest car in the world?</b> </p>
        <p class="answer"><button id="f"><b>Bugatti Bolide</b></button> <button class="f"><b>Lamborghini</b></button></p>
    </div>
    <div id="Q7" >
        <p id="ap" class="color">  <b>What is the most dangerous naturally occuring element?</b> </p>
        <p class="answer"><button id="g"><b>Plutonium <i>(Pu)</i></b></button> <button class="g"><b>Polonium <i>(Po)</i></b></button></p>
    </div>
    <div id="Q8">
        <p id="pac" class="color"> <b>Who has won the most Grammys?</b></p>
        <p class="answer"><button id="h"><b>Beyonce</b></button> <button class="h"><b>Quincy Jones</b></button> </p>
    </div>
    <div id="Q9" >
        <p id="acp" class="color"> <b>What is the most popular social network worldwide</b> </p>
        <p class="answer"><button id="i"><b>Facebook</b></button> <button class="i"><b>Tik Tok</b></button></p>
    </div>
    <div id="Q10" >
        <p id="ac" class="color"> <b>Who is the tallest person to ever live?</b> </p>
        <p class="answer"><button id="j"><b>Robert Wadlow</b></button> <button class="j"><b>Yao Ming</b></button></p>
    </div>
</article>

JavaScript代码 #

$(function() {
    $("div:gt(0)").hide();

    $("button").on("click", function() {
        if ($(this).attr("id")) {
            $("div").removeAttr();
            $("div").attr("class", "move");
            $("p").hide();
            $("div").append("<p class='yc'>You are correct!</p>");
            $("div").append("<p><button class='next'><b>Next Question</b></button>");
        } else {
            $("p").hide();
            $("div").append("<p class='inc'>Incorrect</p>");
            $("div").append("<p><button class='incorrect'><b>Try again</b></button></p>");
        }

        $('.incorrect').on("click", function() {
            $("p").show();
            $('.inc').hide();
            $(this).hide();
        })

        $('.next').on("click", function() {
            $("div").on("click", function() {
                if ($(this).attr("class")) {
                    $(this).next().show().prev().hide();
                }
            })
        });
    })
})

我尝试用$(this)选中当前题目对应的div元素，再通过DOM遍历方法结合hide()和show()函数实现跳转，但未成功。

问题分析与修复 #

核心错误点 #

1. 全局选择器误用：代码中大量使用$("div")、$("p")这类全局选择器，会操作所有匹配元素，而非当前题目对应的容器。
2. 事件绑定嵌套混乱：在button点击事件内嵌套绑定.next和.incorrect事件，会导致重复绑定；.next事件内又绑定div点击事件，完全偏离跳转逻辑。
3. 语法错误：$("div").removeAttr();未指定要移除的属性，属于无效调用。
4. 未准确定位当前题目容器：点击答案按钮时，没有正确找到所属的题目div。

修复后的JavaScript代码 #

$(function() {
    // 初始化：只显示第一个题目，隐藏其他
    $("#Pdiv > div:gt(0)").hide();

    // 委托绑定答案按钮点击事件（兼容动态生成元素）
    $("#Pdiv").on("click", ".answer button", function() {
        const $currentQuestion = $(this).closest("div"); // 获取当前题目容器
        const isCorrect = !!$(this).attr("id"); // 判断是否选中正确答案

        // 隐藏当前题目内的问题和选项
        $currentQuestion.find(".color, .answer").hide();

        if (isCorrect) {
            // 插入正确提示和下一题按钮
            $currentQuestion.append(`<p class='yc'>You are correct!</p><p><button class='next'><b>Next Question</b></button></p>`);
        } else {
            // 插入错误提示和重试按钮
            $currentQuestion.append(`<p class='inc'>Incorrect</p><p><button class='incorrect'><b>Try again</b></button></p>`);
        }
    });

    // 重试按钮点击事件
    $("#Pdiv").on("click", ".incorrect", function() {
        const $currentQuestion = $(this).closest("div");
        // 恢复显示问题和选项，清除错误提示与按钮
        $currentQuestion.find(".color, .answer").show();
        $currentQuestion.find(".inc, .incorrect").parent().remove();
    });

    // 下一题按钮点击事件
    $("#Pdiv").on("click", ".next", function() {
        const $currentQuestion = $(this).closest("div");
        const $nextQuestion = $currentQuestion.next();

        if ($nextQuestion.length) {
            // 切换到下一题
            $currentQuestion.hide();
            $nextQuestion.show();
            // 清除当前题目内的提示与按钮
            $currentQuestion.find(".yc, .next").parent().remove();
        } else {
            // 最后一题完成提示
            $currentQuestion.append(`<p class='finish'>所有题目已完成！</p>`);
            $(this).hide();
        }
    });
})

修复说明 #

• 用closest("div")精准定位当前题目容器，避免全局操作干扰其他题目。
• 采用事件委托处理动态生成的按钮（重试、下一题），确保事件能正确触发。
• 移除无效的removeAttr()调用，改为针对性操作元素。
• 拆分事件绑定逻辑，避免嵌套绑定导致的重复触发问题。
• 增加最后一题完成的提示逻辑，完善用户体验。

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