我如何將表單放入div并逐個查看問題

我有一個有 13 個問題的表格，但我想把它放在一個小 div 中，所以我可以先看到問題 1，用右箭頭轉到問題 2，然后轉到問題 3。用左箭頭回傳到最后題。我是新來的，所以我很感激你的幫助。謝謝 這是我的表格的一部分，我正在嘗試back-1 back-2交換背景圖片

$(".right-arrow").on('click', () => {
  $("#interview-map").attr("hidden", "")
  $(".titulo").attr("hidden", "")
  $(".fuentestyle").removeAttr('hidden')
  $(".container").removeClass("back-1").addClass("back-2")

})

<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">
    <label for="inputAddress2" class="titulo form-label">?Whats your address? </label>

    <div id="interview-map" class="row">
      <div class="locate">
        <p>show my position</p>
        <input id="track" type="checkbox" />
      </div>
    </div>
    <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">
      <div id="interview-address" class="fuentestyle col-12" hidden>
        <label for="referencia" class="form-label">Add your address: </label>
        <input type="text" class="form-control" id="referencia" placeholder="Reference">
      </div>

      <div class="mb-3" hidden>
        <label for="disabledSelect" class="form-label">?Question fuente?</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>
      <div class="mb-3" hidden>
        <label for="disabledSelect" class="form-label">Question construido</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>
      <div class="col-12" hidden>
        <label for="dias_agua" class="form-label">Question dias_agua </label>
        <input type="text" class="form-control" id="dias_agua" placeholder="Enter a number">
      </div>
      <div class="col-12" hidden>
        <label for="horas_agua" class="form-label">Question horas_agua </label>
        <input type="text" class="form-control" id="horas_agua" placeholder="Enter a number to 24">
      </div>

uj5u.com熱心網友回復：

就我個人而言，我會嘗試使我的應用程式更多地由資料驅動，但是如果您無法更改表單本身，那么您可以執行以下操作...

let index = 1;

function back() {
  index--;
  update();
}

function next() {
  index  ;
  update();
}

function update() {
  // Find all questions
  const questions = document.querySelectorAll("[id^='question-']");
  
  // Hide all questions
  questions
    .forEach(question => {
      question.style.display = "none";
    });
   
  // Show the active question
  const activeQuestion = document.getElementById("question-"   index);
  if (activeQuestion != null)
    activeQuestion.style.display = "block";
  
  // Hide/Show the buttons according to which question is being shown
  document.getElementById("back").style.display = index <= 1 ? "none" : "block";
  document.getElementById("next").style.display = index >= questions.length ? "none" : "block";
}

update();

<div id="question-1">Question 1</div>
<div id="question-2">Question 2</div>
<div id="question-3">Question 3</div>
<div id="question-4">Question 4</div>
<div id="question-5">Question 5</div>
<button id="back" onclick="back()">Back</button>
<button id="next" onclick="next()">Next</button>

筆記：

• 上面的解決方案使用原生 javascript（不需要 jQuery）。
• 可以更有效地撰寫此代碼，例如，您實際上不必在每次更新時查詢所有問題。相反，您可以在頁面加載時執行一次此操作。

標籤：javascript html 查询

上一篇：盡管使用.img-fluid類，但影像不適合父div

下一篇：使用Navigate和ParamMap在組件之間發送多個引數