Jquery eq选择器问题：多步骤问卷无法显示第二个之后的元素

问题描述 #

开发多步骤问卷功能时遇到问题：使用jQuery的eq选择器切换.z_window元素，仅能显示第二个问题，后续问题无法展示。问题从数据库动态获取，数量不固定，静态判断方案无法适配3个以上问题。

原代码问题分析 #

1. 字符串拼接错误：$('.z_window:eq(' + stepCount + 1 + ')')会将stepCount与1当作字符串拼接（如stepCount=0时变为eq(01)），而非预期的数值运算，导致后续选择器失效。
2. 静态判断限制：if (stepCount <= 3)使用固定值判断，无法适配动态数量的问题。
3. 进度条硬编码：每次提交都添加固定66%的进度条样式，无法根据问题总数动态更新。
4. 静态隐藏类局限：CSS中用.z_w2, .z_w3固定隐藏后续窗口，新增问题后需手动添加类，扩展性差。

动态适配解决方案 #

修改后的JavaScript代码 #

$(document).ready(function() {
  var form = $('form');
  var stepCount = 0;
  var formCount = $('.z_window').length;
  
  // 初始化：隐藏除第一个外的所有窗口
  $('.z_window:not(:first)').addClass('z_hidden');

  $(form).submit(function(e) {
    // 非最后一步时阻止默认提交，执行切换逻辑
    if (stepCount < formCount - 1) {
      e.preventDefault();
      
      // 隐藏当前步骤
      $('.z_window:eq(' + stepCount + ')').addClass('z_hidden');
      // 显示下一个步骤（修正数值运算逻辑）
      $('.z_window:eq(' + (stepCount + 1) + ')').removeClass('z_hidden');
      
      // 动态计算进度条宽度
      var progressWidth = ((stepCount + 1) / formCount) * 100 + '%';
      $('.z_progress_bar::before').css('width', progressWidth);
    }
    stepCount++;
  })
})

修改后的CSS关键代码 #

.z_window {
  left: 0;
  position: absolute;
  transition: all 0.5s ease;
}

/* 统一隐藏类，替换原有的.z_w2、.z_w3静态类 */
.z_hidden {
  right: 1000px;
  left: -1000px;
}

修改后的HTML关键代码 #

<form action="" method="post">
  <!-- 动态生成的.z_window元素，无需添加z_w2、z_w3类 -->
  <div class="z_window">
    <!-- 第一个问题内容 -->
  </div>
  <div class="z_window">
    <!-- 第二个问题内容 -->
  </div>
  <div class="z_window">
    <!-- 第三个问题内容 -->
  </div>
  <!-- 更多动态生成的问卷步骤 -->
  
  <div class="z_submit">
    <input type="submit" value="Next">
  </div>
</form>

方案说明 #

• 初始化时通过.z_window:not(:first)批量隐藏非首步窗口，适配任意数量的动态问题。
• 进度条宽度根据当前步骤与总问题数的比例动态计算，确保进度展示准确。
• 最后一步（stepCount === formCount - 1）时，不再阻止表单默认提交，正常提交问卷数据。

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