如何修复多步骤表单中jQuery Previous（上一步）按钮失效问题

问题原因 #

• prvbtn函数作用域错误：你把prvbtn定义在了Next按钮的click回调函数内部，属于局部函数，全局作用域下找不到这个函数，所以HTML中onclick="prvbtn()"绑定的事件完全无法触发。
• 上一步逻辑缺失：就算函数能正常触发，现有代码也只修改了currentSectionIndex的变量值，没有对应执行切换is-active类的操作，页面不会发生任何跳转。
• 重复绑定问题：你把表单submit事件的阻止默认行为逻辑放在了Next按钮的click回调里，每次点击Next都会重复绑定submit事件，属于冗余错误代码。
• 变量作用域问题：currentSection、currentSectionIndex都是Next按钮点击回调内的局部变量，prvbtn内无法直接访问这些值，逻辑无法正常运行。

修复后的完整代码 #

HTML部分（调整了按钮类名，用jQuery绑定事件替代inline onclick，更规范） #

<form class="form-wrapper">
  <fieldset class="section is-active">
    <h3>Details</h3>
    <div class="inputlabel">
     <label>Exchange</label>
     </div>
    <input type="text" placeholder="Exchange..">
    
    <div class="button next-btn">Next</div>
  </fieldset>
  
  <fieldset class="section">
    <h3>Title</h3>
    <div class="inputlabel">
    <label>Balance</label>
    </div>
    <input type="text" placeholder="Password" readonly>

     
    <div class="button prev-btn" id="btnprevious">Previous</div>
    <input class="submit button" type="submit" value="Finish">
  </fieldset>
  <fieldset class="section">
    <i class="fas fa-check-circle fa-7x"></i>
    <h2>Saved</h2>
    <p>Your Data has been saved</p>
    <div class="button close-btn" id="button2">Close</div>

  </fieldset>
</form>

jQuery部分 #

$(document).ready(function(){
  // 全局阻止表单提交默认行为
  $(".form-wrapper").submit(function(e) {
    e.preventDefault();
    // 提交后跳转到成功页
    const currentSection = $(this).find(".section.is-active");
    currentSection.removeClass("is-active").next().addClass("is-active");
    const currentSectionIndex = currentSection.index();
    $('.steps li').eq(currentSectionIndex).removeClass("is-active").next().addClass("is-active");
  });

  // 下一步按钮逻辑
  $(".next-btn").click(function(){
    const button = $(this);
    const currentSection = button.parents(".section");
    const currentSectionIndex = currentSection.index();
    // 切换步骤样式
    currentSection.removeClass("is-active").next().addClass("is-active");
    $('.steps li').eq(currentSectionIndex).removeClass("is-active").next().addClass("is-active");
  });

  // 上一步按钮逻辑
  $(".prev-btn").click(function(){
    const button = $(this);
    const currentSection = button.parents(".section");
    const currentSectionIndex = currentSection.index();
    // 切换步骤样式
    currentSection.removeClass("is-active").prev().addClass("is-active");
    $('.steps li').eq(currentSectionIndex).removeClass("is-active").prev().addClass("is-active");
  });

  // 关闭按钮逻辑，可按需自定义
  $(".close-btn").click(function(){
    // 示例逻辑：重置表单回到第一步
    $(".form-wrapper .section").removeClass("is-active").first().addClass("is-active");
    $('.steps li').removeClass("is-active").first().addClass("is-active");
  });
});

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