如何在div中嵌入表单并实现单题逐题切换查看功能

1. HTML改造 #

• 给所有问题模块统一添加question-item类名，第一题包含最开始的地址询问和定位区域，后续每个表单问题都单独作为一个question-item
• 补充左箭头元素，和右箭头放在同一层级
  修改后的示例代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container back-1 py-3 h-100">
  <div class="location-container col-12">
    <!-- 第1题 统一加question-item类 -->
    <div class="question-item">
      <label for="inputAddress2" class="titulo form-label">请问你的地址是？</label>
      <div id="interview-map" class="row">
        <div class="locate">
          <p>显示我的位置</p>
          <input id="track" type="checkbox" />
        </div>
      </div>
    </div>

    <!-- 箭头区域 -->
    <img class="left-arrow" src="assets/img/left_arrow.png" alt="" hidden>
    <img class="right-arrow" src="assets/img/right_arrow.png" alt="">
  </div>
  <div class="col-md-12">
    <form id="form_interview" class="col-lg-12 row g-3 mx-10 my-10">
      <!-- 第2题 加question-item类 -->
      <div id="interview-address" class="fuentestyle col-12 question-item">
        <label for="referencia" class="form-label">补充你的地址：</label>
        <input type="text" class="form-control" id="referencia" placeholder="备注">
      </div>

      <!-- 第3题 加question-item类 -->
      <div class="mb-3 question-item">
        <label for="disabledSelect" class="form-label">请问水源类型是？</label>
        <select id="fuente" class="form-select form-select-sm" aria-label=".form-select-sm example">
          <option id="fuente-0" selected class="form-control"></option>
          <option id="fuente-1" value="1"></option>
          <option id="fuente-2" value="2"></option>
          <option id="fuente-3" value="3"></option>
          <option id="fuente-4" value="4"></option>
        </select>
      </div>
      <!-- 第4题 加question-item类 -->
      <div class="mb-3 question-item">
        <label for="disabledSelect" class="form-label">请问房屋建造类型是？</label>
        <select id="construido" class="form-select form-select-sm" aria-label=".form-select-sm example">
          <option id="construido-0" selected class="form-control"></option>
          <option id="construido-1" value="1"></option>
          <option id="construido-2" value="2"></option>
        </select>
      </div>
      <!-- 后面剩余的9道题都按这个格式加question-item类即可 -->
      <div class="col-12 question-item">
        <label for="dias_agua" class="form-label">请问每月有多少天能正常供水？</label>
        <input type="text" class="form-control" id="dias_agua" placeholder="请输入数字">
      </div>
      <div class="col-12 question-item">
        <label for="horas_agua" class="form-label">请问每天正常供水时长为多少小时？</label>
        <input type="text" class="form-control" id="horas_agua" placeholder="请输入0-24之间的数字">
      </div>
    </form>
  </div>
</div>

2. JS逻辑编写 #

替换你原来的点击事件代码，用统一的分页逻辑控制：

// 配置项：总题量、当前页码
const totalQuestion = 13
let currentPage = 1

// 切换题目通用函数
function switchQuestion(targetPage) {
  // 隐藏所有题目
  $('.question-item').attr('hidden', true)
  // 显示目标页题目
  $('.question-item').eq(targetPage - 1).removeAttr('hidden')
  // 切换背景类
  $('.container').removeClass((index, className) => (className.match(/back-\d+/g) || []).join(' ')).addClass(`back-${targetPage}`)
  // 控制箭头显隐：第一页隐藏左箭头，最后一页隐藏右箭头
  $('.left-arrow').attr('hidden', targetPage === 1)
  $('.right-arrow').attr('hidden', targetPage === totalQuestion)
  // 保存当前页码
  currentPage = targetPage
}

// 右箭头点击事件
$('.right-arrow').on('click', () => {
  if (currentPage < totalQuestion) {
    switchQuestion(currentPage + 1)
  }
})

// 左箭头点击事件
$('.left-arrow').on('click', () => {
  if (currentPage > 1) {
    switchQuestion(currentPage - 1)
  }
})

// 初始化默认显示第一题
switchQuestion(1)

注意事项 #

• 所有题目都要加question-item类，且顺序要和你想要的展示顺序一致
• 提前在CSS中写好back-1到back-13对应的背景样式即可复用你原来的背景切换逻辑
• 如果需要加必填校验，可以在切换页面前加判断，当前页必填项未填时禁止跳转

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