Laravel问答应用实现单题切换及提交功能技术求助

看起来你在把纯JS的问答逻辑迁移到Laravel Blade模板时遇到了逻辑匹配的问题——原代码试图动态创建题目，但你的Blade已经把所有题目都渲染出来了，这就导致JS逻辑和DOM结构完全不匹配。我来给你调整一套更适配Laravel的实现方案，完美满足你的需求：

第一步：调整Blade模板结构 #

首先修改你的index.blade.php，给每个独立的题目包裹专属容器，方便控制显示/隐藏，同时优化表单命名和初始状态：

<div class="question" id="question-div">
    <form action="{{ url('en-question-answer') }}" method="POST" id="question-form">
        @csrf
        <?php $count = 0; ?>
        @foreach($equestions as $equestionType)
            @foreach($equestionType as $key => $equestion)
                <!-- 给每个题目包裹容器，初始仅显示第一个 -->
                <div class="question-item" {{ $count === 0 ? '' : 'style="display: none;"' }}>
                    <p>{{ $equestion->question }}</p>
                    <input type="hidden" name="question_id[]" value="{{ $equestion->id }}">
                    <label class="radio-inline">
                        <input type="radio" required name="en_answer[{{ $count }}]" value="{{ $equestion->choice_a }}">
                        {{ $equestion->option1 }}
                    </label>
                    <label class="radio-inline">
                        <input type="radio" required name="en_answer[{{ $count }}]" value="{{ $equestion->choice_b }}">
                        {{ $equestion->option2 }}
                    </label>
                    <hr>
                </div>
                <?php $count++; ?>
            @endforeach
        @endforeach

        <button type="submit" id="submit" class="btn btn-primary btn-sm pull-right" style="display: none;">Submit</button>
        <div class='button' id='next'><a href='#' >Next</a></div>
        <div class='button' id='prev' style="display: none;"><a href='#' >Prev</a></div>
    </form>
</div>

这里做了几个关键优化：

• 每个题目用.question-item容器包裹，初始只展示第一个题目
• 简化question_id命名为数组形式question_id[]，Laravel后端可以直接解析为数组
• 默认隐藏Prev按钮和Submit按钮，后续由JS控制显示

第二步：替换为适配的JavaScript逻辑 #

接下来替换你的JS脚本，这套逻辑直接基于已渲染的DOM操作，简单可靠：

<script>
$(document).ready(function() {
    const questionItems = $('.question-item');
    const totalQuestions = questionItems.length;
    let currentQuestionIndex = 0;
    const nextBtn = $('#next');
    const prevBtn = $('#prev');
    const submitBtn = $('#submit');

    // 初始化检查当前题目选中状态，控制Next按钮可用性
    checkCurrentQuestionSelection();

    // Next按钮点击事件
    nextBtn.on('click', function(e) {
        e.preventDefault();
        // 当前题目未选选项时阻止跳转
        if (!isCurrentQuestionAnswered()) {
            alert('请先选择一个选项！');
            return;
        }

        // 切换题目显示状态
        questionItems.eq(currentQuestionIndex).hide();
        currentQuestionIndex++;
        questionItems.eq(currentQuestionIndex).show();

        // 更新按钮状态
        updateButtonStates();
    });

    // Prev按钮点击事件
    prevBtn.on('click', function(e) {
        e.preventDefault();
        // 切换题目显示状态
        questionItems.eq(currentQuestionIndex).hide();
        currentQuestionIndex--;
        questionItems.eq(currentQuestionIndex).show();

        // 更新按钮状态
        updateButtonStates();
    });

    // 监听单选框变化，实时更新Next按钮状态
    $('input[type="radio"]').on('change', function() {
        checkCurrentQuestionSelection();
    });

    // 检查当前题目是否已选选项，控制Next按钮可用性
    function checkCurrentQuestionSelection() {
        const isAnswered = isCurrentQuestionAnswered();
        nextBtn.toggleClass('disabled', !isAnswered);
        // 禁用时阻止点击事件
        nextBtn.find('a').css('pointer-events', isAnswered ? 'auto' : 'none');
    }

    // 判断当前题目是否已回答
    function isCurrentQuestionAnswered() {
        return questionItems.eq(currentQuestionIndex).find('input[type="radio"]:checked').length > 0;
    }

    // 更新按钮显示/隐藏状态
    function updateButtonStates() {
        // 第一题隐藏Prev，其他情况显示
        prevBtn.toggle(currentQuestionIndex > 0);
        // 最后一题隐藏Next，显示Submit
        if (currentQuestionIndex === totalQuestions - 1) {
            nextBtn.hide();
            submitBtn.show();
        } else {
            nextBtn.show();
            submitBtn.hide();
        }
        // 切换后重新检查当前题目的选中状态
        checkCurrentQuestionSelection();
    }
});
</script>

关键功能说明 #

• 单题展示：通过控制.question-item的display属性，每次只显示当前索引的题目
• 未选禁止Next：实时检查当前题目单选框选中状态，未选中时禁用Next按钮（包括阻止点击事件）
• 按钮自动切换：第一题隐藏Prev按钮，最后一题隐藏Next并显示Submit按钮
• 适配Laravel表单：表单字段保持Laravel可解析的数组格式，后端可直接通过$request->question_id和$request->en_answer获取所有题目ID与对应答案

可选样式优化 #

如果需要给禁用的Next按钮加视觉提示，可添加CSS：

#next.disabled a {
    color: #ccc;
    cursor: not-allowed;
}

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