主视图foreach渲染的分部视图如何点击按钮逐个切换显示并校验必填字段

你现有代码的核心错误如下：

• jQuery 不存在 on('each') 绑定语法，遍历元素需使用 .each() 方法，或者直接用事件委托绑定点击事件即可，不需要额外遍历绑定
• nextSibling()、previousSibling() 是原生 DOM 接口，jQuery 对应的方法为 .next()、.prev()
• 你要控制显隐的是整个分部视图容器.partial-class-result，而不是父级的按钮栏.survey-control
• 查找Response输入框的选择器错误：循环生成的EditorFor不会生成全局id="Response"的元素，要通过层级查找匹配
• 页面初始化后没有默认展示第一个问题，打开页面无内容

修改后的完整JavaScript代码 #

$(function () {
    // 初始化默认显示第一个问题
    const $allQuestions = $('.partial-class-result');
    $allQuestions.eq(0).show();
    // 可选优化：第一个问题隐藏上一步按钮，最后一个问题隐藏下一步按钮
    $allQuestions.eq(0).find('.btn-left').hide();
    $allQuestions.eq($allQuestions.length - 1).find('.btn-right').hide();

    // 下一步按钮点击事件，事件委托兼容动态渲染的元素
    $(document).on('click', '.btn-right', function () {
        // 获取当前整个问题容器
        const $current = $(this).closest('.partial-class-result');
        // 查找当前问题的Response输入框，可根据实际生成的元素类型调整选择器
        const $responseInput = $current.find('.response input, .response textarea, .response select');
        
        // 校验必填
        if ($responseInput.val().trim() === '') {
            alert('请先填写当前问题的回答');
            return;
        }

        // 隐藏当前问题，显示下一个
        $current.hide();
        $current.next('.partial-class-result').show();
    });

    // 上一步按钮点击事件
    $(document).on('click', '.btn-left', function () {
        const $current = $(this).closest('.partial-class-result');
        $current.hide();
        $current.prev('.partial-class-result').show();
    });
});

原有CSS代码无需修改，即可实现逐个展示问题、填写完成才能进入下一题的需求。如果需要最后一题点击按钮提交表单，只需把最后一个问题的下一步按钮改成type="submit"的提交按钮即可。

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