F1键触发performNext函数无法切换fieldset问题求助

问题根源 #

你的performNext函数并没有直接执行fieldset切换逻辑——它只是给.next按钮绑定了点击事件。所以：

• 页面加载时调用performNext能正常工作，是因为之后你点击了.next按钮，触发了绑定的切换逻辑；
• 按F1调用performNext时，只是重复绑定了一次点击事件，并没有触发实际的切换动作，所以看不到效果。

修复方案 #

把切换fieldset的核心逻辑抽成独立函数，让按钮点击和F1按键都能直接调用它：

1. 抽离独立的切换函数

function switchToNextFieldset() {
    // 找到当前显示的fieldset
    var $current_fs = $("fieldset:visible");
    var $next_fs = $current_fs.next();

    // 如果没有下一个fieldset，直接终止
    if (!$next_fs.length) return;

    // 显示下一个fieldset并执行动画切换
    $next_fs.show();
    $current_fs.animate({
        opacity: 0
    }, {
        step: function(now) {
            var opacity = 1 - now;
            $current_fs.css({
                'display': 'none',
                'position': 'relative'
            });
            $next_fs.css({
                'opacity': opacity
            });
        },
        duration: 500
    });
}

2. 修改performNext绑定按钮事件

function performNext() {
    console.log("performNext started");

    // 按钮点击时调用切换逻辑
    $(".next").click(function() {
        switchToNextFieldset();
    });

    $("#msform").on("submit", function(e) {
        e.preventDefault()
    })
    
    console.log("performNext ended");
}

3. 修改F1按键监听逻辑

$(document).on("keydown", (e) => {
    if (e.key === "F1") {
        e.preventDefault();
        // 直接调用切换函数
        switchToNextFieldset();
        console.log("F1");
    };
});

补充说明 #

• 原代码中用$(this).closest("fieldset")依赖按钮所在的上下文，但F1触发时没有这个上下文，所以改成用$("fieldset:visible")定位当前显示的fieldset，确保两种触发方式都能正常工作；
• 新增了if (!$next_fs.length) return的判断，避免在没有下一个fieldset时执行无效逻辑。

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