我怎样才能把表格放在div里面，然后用问题来看问题呢？

Question

我有一个有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>

​

Answer 1

就我个人而言，我会尝试使我的应用程序更受数据驱动，但是如果您不能更改表单本身，那么您可以这样做.

​

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 ( necessary).

• This不是jQuery)，可以更高效地编写代码，例如，您不必在每次更新中查询所有问题。相反，您可以在加载页面时执行一次。