点击Current按钮时无法正确同步步骤计数器问题求助

问题根因 #

• Current按钮逻辑错误：点击Current按钮时，你从当前点击按钮所在的fieldset读取value作为计数器值，而非跳转目标#current-step（也就是Step3）的value，导致计数器保留跳转前的步骤序号。
• 初始状态不符合需求：你要求Step3为默认当前步骤，但现有CSS默认仅显示第一个fieldset（Step1），计数器默认值也为1，与需求不匹配。
• 字段值配置错误：Step5对应的fieldset的value属性写为4，和实际步骤序号不一致。
• 全局current变量未被利用：你定义的current变量没有在步骤切换时同步更新，也没有用于按钮禁用状态的校验，容易出现逻辑混乱。

修复代码 #

JS部分 #

// 初始化配置
let current = 3; // 默认Step3为当前步骤
let current_step, next_step, steps = $("fieldset").length;
// 更新总步骤数
$('.final-step').text(steps);
// 初始显示Step3，隐藏其他步骤
$('fieldset').hide();
$('#current-step').show();
// 初始化计数器
$('.counter-step').text(current);
// 初始禁用状态处理
updateBtnDisabled();

$(".next").on("click", function () {
  current_step = $(this).parent("fieldset");
  next_step = current_step.next();
  next_step.show();
  current_step.hide();
  current++;
  $('.counter-step').text(current);
  updateBtnDisabled();
});

$(".previous").on("click", function () {
  current_step = $(this).parent("fieldset");
  next_step = current_step.prev();
  next_step.show();
  current_step.hide();
  current--;
  $('.counter-step').text(current);
  updateBtnDisabled();
});

// Current按钮功能修复
$(".current").on("click",function(){
  current_step = $(this).parent("fieldset");
  next_step = $("#current-step");
  next_step.show();
  current_step.hide();
  // 从跳转目标Step3读取步骤序号
  current = next_step.attr('value') * 1;
  $('.counter-step').text(current);
  updateBtnDisabled();
});

// 统一处理按钮禁用状态
function updateBtnDisabled() {
  $('.previous').prop('disabled', current === 1);
  $('.next').prop('disabled', current === steps);
}

HTML部分修正 #

将Step5的fieldset的value属性从4改为5：

<fieldset class="last-step" id="last-step" value="5">
  <h4 class="mb-3 header">Step-5</h4>
  <!-- 按钮代码保持不变 -->
</fieldset>

CSS部分修改 #

移除原本默认只显示第一个fieldset的样式，改为由JS控制显示隐藏即可，保留也不会影响功能：

/* 移除这段样式即可
.container fieldset:not(:first-of-type) {
  display: none;
}
*/

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