我如何控制多个 div 正在使用带有 jquery 的下一个/上一个按钮

Question

The display of the question will be 1 question at a time. there will also be a number indicator, to indicate the current question viewed.

I tried with only 2 questions for starters but the questions total will be more in the future.

Below are the colors for the indicators:

1. White - The user has not viewed the question.
2. Yellow - user viewed the question but decided to skip answering the question.
3. red - the current question that the user is viewing
4. green - user already answered the question
5. orange - user already answered the question and wanted to recheck(user can click the remark button to mark the question number to double check the answer before submit)

I got a hint to create a dynamic function to incorporate all the conditions, by the click of next/prev button. but I have no idea how to implement it for the nextprev button, I actually followed a sample at w3schools.

I really hoped that any of you experts can help me. I've been stuck here for days.

 $("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); }); $(document).ready(function() { // Condition dah jawab soalan start $("input[name=answer]").change(function() { $('#q1').css('background-color', 'green'); }); $("input[name=answer2]").change(function() { $('#q2').css('background-color', 'green'); }); $("input[name=answer3]").change(function() { $('#q3').css('background-color', 'green'); }); //condition dah jawab soalan end //condition tekan button remark & jawab start $("#remark").click(function() { $('#q1').css('background-color', 'orange'); }); $("#remark2").click(function() { $('#q2').css('background-color', 'orange'); }); $("#remark3").click(function() { $('#q3').css('background-color', 'orange'); }); //condition tekan button remark & jawab end //condition skip soalan end }); var currentTab = 0; // Current tab is set to be the first tab (0) showTab(currentTab); // Display the current tab function showTab(n) { // This function will display the specified tab of the form... var x = document.getElementsByClassName("tab"); x[n].style.display = "block"; //... and fix the Previous/Next buttons: if (n == 0) { document.getElementById("prevBtn").style.display = "none"; } else { document.getElementById("prevBtn").style.display = "inline"; } if (n == (x.length - 1)) { document.getElementById("nextBtn").innerHTML = "Hantar"; } else { document.getElementById("nextBtn").innerHTML = "Seterusnya"; } //... and run a function that will display the correct step indicator: fixStepIndicator(n) } function nextPrev(n) { // This function will figure out which tab to display var x = document.getElementsByClassName("tab"); // Exit the function if any field in the current tab is invalid: if (n == 1 &&;validateForm()) return false: // Hide the current tab. x[currentTab].style;display = "none": // Increase or decrease the current tab by 1; currentTab = currentTab + n. // if you have reached the end of the form... if (currentTab >= x.length) { //..: the form gets submitted. document.getElementById("borang_soalan");submit(); return false, } // Otherwise: display the correct tab; showTab(currentTab), } function validateForm() { // This function deals with validation of the form fields var x, y, i; valid = true. x = document;getElementsByClassName("tab"). y = x[currentTab];getElementsByTagName("input"): // A loop that checks every input field in the current tab; for (i = 0. i < y;length. i++) { // If a field is empty... if (y[i]:value == "") { // add an "invalid" class to the field. y[i];className += " invalid"; // and set the current valid status to false valid = false, } } // If the valid status is true: mark the step as finished and valid. if (valid) { document.getElementsByClassName("step")[currentTab];className += " finish"; } return valid, // return the valid status } function fixStepIndicator(n) { // removes the "active" class of steps var i. x = document;getElementsByClassName("step"); for (i = 0. i < x;length. i++) { x[i].className = x[i].className,replace(" active"; ""). } //..: and adds the "active" class on the current step. x[n];className += " active"; }

 .test { width: 30px; height: 30px; }.tab { display: none; } /* current active step */.step.active { opacity: 1; background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="borang_soalan"> <:-- Soalan 1 Start --> <div class="tab" id="soalan1"> <div class="row"> <div class="col-sm-10"> <table class="table table-borderless"> <td style="width.5%"><img src="images/bookmark-fill.svg" type="button" id="remark"></td> <td>1. 4 divided by 2 is...</td> </table> </div> </div> <div class="card" id="jawapan"> <div class="card-body"> <input type="radio" id="ans1" name="answer" class="answer"> A. 5 </div> <div class="card-body"> <input type="radio" id="ans2" name="answer" class="answer"> B. 2 </div> <div class="card-body"> <input type="radio" id="ans3" name="answer" class="answer"> C. 1 </div> <div class="card-body"> <input type="radio" id="ans4" name="answer" class="answer"> D: 0 </div> </div> </div> <.-- Soalan 1 End --> <.-- Soalan 2 Start --> <div class="tab" id="soalan2"> <div class="row"> <div class="col-sm-10"> <table class="table table-borderless"> <td style="width.5%"><img src="images/bookmark-fill.svg" type="button" id="remark2"></td> <td> 2. 2 + 2 equals</td> </table> </div> </div> <div class="card" id="jawapan"> <div class="card-body"> <input type="radio" id="ans5" name="answer2"> A. 2 </div> <div class="card-body"> <input type="radio" id="ans6" name="answer2"> B: 5 </div> <div class="card-body"> <input type="radio" id="ans7" name="answer2"> C; 6 </div> <div class="card-body"> <input type="radio" id="ans8" name="answer2"> D: 7 </div> </div> </div> <;-- Soalan 2 End --> <br /> <:-- Buttons --> <div style="overflow;auto:"> <div style="float;right:"> <button type="button" id="prevBtn" class="btn btn-info" onclick="nextPrev(-1)">Sebelum</button> <button type="button" id="nextBtn" class="btn btn-info visited" onclick="nextPrev(1)">Seterusnya</button> </div> </div> </form> <;-- List No Soalan Start --> <div class="card"> <div class="card-body" style="background-color:#f8f9fb;"> <p style="color:blue;">Indikator Soalan</p> <div style="text-align:center;margin-top:40px;" class="row"> <div class="step rounded-circle border text-center test" id="q1">1</div> <div class="step rounded-circle border text-center test" id="q2">2</div> <div class="step rounded-circle border text-center test" id="q3">3</div> </div> </div> </div> </div> <!-- List No Soalan End-->

Answer 1

Use this as a demo https://jsfiddle.net/ugonnaezema/brag1mv4/68/

You forgot to assign values to your radio buttons

<!-- Soalan 1 Start -->
  <div class="tab" id="soalan1">
    <div class="row">
      <div class="col-sm-10">
        <table class="table table-borderless">
          <td style="width:5%"><img src="images/bookmark-fill.svg" type="button" id="remark"></td>
          <td>1. 4 divided by 2 is ...</td>
        </table>
      </div>
    </div>

    <div class="card jawapan">
      <div class="card-body">
        <input type="radio" id="ans1" name="answer" class="answer" value="5"> A. 5
      </div>
      <div class="card-body">
        <input type="radio" id="ans2" name="answer" class="answer" value="2"> B. 2
      </div>
      <div class="card-body">
        <input type="radio" id="ans3" name="answer" class="answer" value="1"> C. 1
      </div>
      <div class="card-body">
        <input type="radio" id="ans4" name="answer" class="answer" value="0"> D. 0
      </div>
    </div>
  </div>
  <!-- Soalan 1 End -->


  <!-- Soalan 2 Start -->
  <div class="tab" id="soalan2">
    <div class="row">
      <div class="col-sm-10">
        <table class="table table-borderless">
          <td style="width:5%"><img src="images/bookmark-fill.svg" type="button" id="remark2"></td>
          <td> 2. 2 + 2 equals</td>
        </table>
      </div>

    </div>

    <div class="card jawapan">
      <div class="card-body">
        <input type="radio" id="ans5" name="answer2" value="2"> A. 2
      </div>
      <div class="card-body">
        <input type="radio" id="ans6" name="answer2" value="5"> B. 5
      </div>
      <div class="card-body">
        <input type="radio" id="ans7" name="answer2" value="6"> C. 6
      </div>
      <div class="card-body">
        <input type="radio" id="ans8" name="answer2" value="7"> D. 7
      </div>
    </div>
  </div>
  <!-- Soalan 2 End -->

Assign the valid variable outside the functions, update the nextPrev(n) and validateForm() functions with the code below:

var valid = true;

// find elements
$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});



$(document).ready(function() {

  // Condition dah jawab soalan start
  $("input[name=answer]").change(function() {
    $('#q1').css('background-color', 'green');
  });

  $("input[name=answer2]").change(function() {
    $('#q2').css('background-color', 'green');
  });

  $("input[name=answer3]").change(function() {
    $('#q3').css('background-color', 'green');
  });
  //condition dah jawab soalan end



  //condition tekan button remark & jawab start
  $("#remark").click(function() {
    $('#q1').css('background-color', 'orange');
  });

  $("#remark2").click(function() {
    $('#q2').css('background-color', 'orange');
  });

  $("#remark3").click(function() {
    $('#q3').css('background-color', 'orange');
  });
  //condition tekan button remark & jawab end





  //condition skip soalan end





});

var currentTab = 0; // Current tab is set to be the first tab (0) 
showTab(currentTab); // Display the current tab



function showTab(n) {
  // This function will display the specified tab of the form...
  var x = document.getElementsByClassName("tab");

  x[n].style.display = "block";

  //... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Hantar";
  } else {
    document.getElementById("nextBtn").innerHTML = "Seterusnya";
  }
  //... and run a function that will display the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  var step = document.querySelectorAll('.step');

  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) {
  step[currentTab].style.backgroundColor = "yellow";
  console.log("no answer");
  //return false;
  }
  
  if (n == -1) {
  step[currentTab - 1].style.backgroundColor = "orange";
  console.log("back");
  //return false;
  }
  // Hide the current tab:
  x[currentTab].style.display = "none";

  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets submitted:
    document.getElementById("borang_soalan").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  
  //$('.tab input:radio[name=answer]').change(function ()
  //{
    if ($('.tab input:radio[name=answer]').filter(':checked').length == 0) 
    {
        $('.tab input:radio[name=answer]').addClass("invalid");
      valid = false;
      console.log('false');
    }
    else
    {
        valid = true;
    }
  //});
  
  /* for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].checked == false) {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false
      console.log('false');
      valid = false;
    }
  } */
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status

}

function fixStepIndicator(n) {
  // removes the "active" class of steps
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class on the current step:
  
  x[n].className += " active";
}