触发点击事件跳过步骤：Prev按钮active值异常问题排查

兄弟，我帮你瞅了瞅Prev按钮的代码，问题主要出在这几个地方，导致点击后一直alert(3)没法正常跳转：

1. 局部变量导致的无限递归 #

你在Prev的点击回调里声明了var active = -1，这是个局部变量——每次点击Prev按钮，这个变量都会被重新初始化回-1，所以if (active < 0)的判断每次都会成立。当当前步骤是3时，你触发了jQuery(".prev").trigger("click")，这会再次调用同一个点击函数，直接陷入无限循环：每次进入函数都重新声明active=-1，获取当前步骤3，alert，再触发点击，周而复始，根本没机会执行跳转逻辑。

2. 逻辑错误：触发自身点击而非直接跳转 #

Next按钮的逻辑里触发click是因为它要借默认的next行为跳过步骤2，但Prev按钮里触发自身click完全是反效果——不仅不会跳转到步骤1，反而会让函数无限重复执行。你应该直接手动修改DOM状态跳转到步骤1，而不是依赖触发点击事件。

3. 变量作用域不统一 #

Next按钮用的是外层作用域的active变量，而Prev按钮单独声明了局部的active，导致两者的状态完全不同步，逻辑自然混乱。

修正后的代码 #

首先，保持和Next按钮共用同一个外层active变量：

var active = -1; // 放在两个点击函数的外层，确保状态同步

然后修改Prev按钮的逻辑：

jQuery('.prev').click(function(event){
    // 初始化active变量（和Next按钮逻辑一致）
    if (active < 0) {
        active = jQuery('ul#checkout_timeline').find('li.active').data('step');
    }

    // 处理步骤3跳回步骤1的特殊逻辑
    if(active === '3') {
        // 手动切换到步骤1的状态
        jQuery('ul#checkout_timeline li').removeClass('active');
        jQuery('ul#checkout_timeline li[data-step="1"]').addClass('active');
        
        // 更新active变量
        active = '1';
        
        // 阻止默认的Prev跳转行为，避免执行原本的步骤2跳转
        event.preventDefault();
        return false;
    }

    // 非特殊情况：执行正常的Prev逻辑，更新active变量
    active = jQuery('ul#checkout_timeline').find('li.active').data('step');
});

修正思路说明 #

• 统一变量作用域：共用外层的active，确保Next和Prev按钮的状态同步。
• 直接修改DOM状态：当处于步骤3时，手动给步骤1的li添加active类，移除其他的，直接完成跳转，避免触发自身点击导致的循环。
• 阻止默认行为：用event.preventDefault()和return false阻止按钮原本的跳转逻辑，确保只会执行我们的特殊跳转。

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