时间戳

首页 > 解决方案 > 使用 Jquery 显示存储的变量

javascript - 使用 Jquery 显示存储的变量

问题描述

我正在写一个简单的测验，其中答案存储在 5 个变量中。在第 5 个问题之后，我希望显示结果。

在 jquery 实现隐藏下一个问题之前，我使用了documents.write.Rus（rus 是变量）。这行得通，但我不知道如何在我的 jquery 代码中实现它。有人可以看看吗？

这是我的 javascript & html 代码：

function check() {
  var Rus = 0;
  var Zin = 0;
  var Duu = 0;
  var Ver = 0;
  var Zor = 0;

  var q1 = document.quiz.q1.value;
  if (q1 == "Rus") {
    Rus++
  }
  if (q1 == "Zin") {
    Zin++
  }
  if (q1 == "Duu") {
    Duu++
  }
  if (q1 == "Ver") {
    Ver++
  }
  if (q1 == "Zor") {
    Zor++
  }

}
$(document).ready(function() {
  //hide all questions
  $('.questionForm').hide();
  $('#results').hide();
  //show first question 
  $('#q1').show();

  $('#q1 #button').click(function() {
    $('.questionForm').hide();
    $('.results').hide();
    $('#q2').show();
    return false;
  });

  $('#q2 #button').click(function() {
    $('.questionForm').hide();
    $('#results').hide();
    $('#q3').show();
    return false;
  });

  $('#q3 #button').click(function() {
    $('.questionForm').hide();
    $('#results').hide();
    $('#q4').show();
    return false;
  });

  $('#q4 #button').click(function() {
    $('.questionForm').hide();
    $('#results').hide();
    $('#q5').show();
    return false;
  });

  $('#q5 #button').click(function() {
    $('.questionForm').hide();
    // show results 
    $('#results').show();
    $Rus.show();

    return false;
  });

});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="STYLE.CSS">
  <title>Document</title>
</head>

<body>
  <form class="questionForm" name="quiz" id="q1" data-question="1">
    <div>
      <p>Question 1</p>
      <p><input type="radio" name="q1" value="Rus">A. Rustgeving</p>
      <p><input type="radio" name="q1" value="Zin">B. Zingeving</p>
      <p><input type="radio" name="q1" value="Duu">C. Duurzaamheid</p>
      <p><input type="radio" name="q1" value="Ver">D. Verzuiling</p>
      <p><input type="radio" name="q1" value="Zor">D. Zorgzaamheid</p>
    </div>
    <input class="favorite styled" id="button" type="button" value="Volgende" onclick="check()">
  </form>

  <form class="questionForm" name="quiz" id="q2" data-question="2">
    <div>
      <p>Question 2</p>
      <p><input type="radio" name="q2" value="Rus">A. Rustgeving</p>
      <p><input type="radio" name="q2" value="Zin">B. Zingeving</p>
      <p><input type="radio" name="q2" value="Duu">C. Duurzaamheid</p>
      <p><input type="radio" name="q2" value="Ver">D. Verzuiling</p>
      <p><input type="radio" name="q2" value="Zor">D. Zorgzaamheid</p>
    </div>
    <input class="favorite styled" id="button" type="button" value="Volgende" onclick="check()">
  </form>

  <form class="questionForm" name="quiz" id="q3" data-question="3">
    <div>
      <p>Question 3</p>
      <p><input type="radio" name="q3" value="Rus">A. Rustgeving</p>
      <p><input type="radio" name="q3" value="Zin">B. Zingeving</p>
      <p><input type="radio" name="q3" value="Duu">C. Duurzaamheid</p>
      <p><input type="radio" name="q3" value="Ver">D. Verzuiling</p>
      <p><input type="radio" name="q3" value="Zor">D. Zorgzaamheid</p>
    </div>
    <input class="favorite styled" id="button" type="button" value="Volgende" onclick="check()">
  </form>

  <form class="questionForm" name="quiz" id="q4" data-question="4">
    <div>
      <p>Question 4</p>
      <p><input type="radio" name="q4" value="Rus">A. Rustgeving</p>
      <p><input type="radio" name="q4" value="Zin">B. Zingeving</p>
      <p><input type="radio" name="q4" value="Duu">C. Duurzaamheid</p>
      <p><input type="radio" name="q4" value="Ver">D. Verzuiling</p>
      <p><input type="radio" name="q4" value="Zor">D. Zorgzaamheid</p>
    </div>
    <input class="favorite styled" id="button" type="button" value="Volgende" onclick="check()">
  </form>

  <form class="questionForm" name="quiz" id="q5" data-question="5">
    <div>
      <p>Question 5</p>
      <p><input type="radio" name="q5" value="Rus">A. Rustgeving</p>
      <p><input type="radio" name="q5" value="Zin">B. Zingeving</p>
      <p><input type="radio" name="q5" value="Duu">C. Duurzaamheid</p>
      <p><input type="radio" name="q5" value="Ver">D. Verzuiling</p>
      <p><input type="radio" name="q5" value="Zor">D. Zorgzaamheid</p>
    </div>
    <input class="favorite styled" id="button" type="button" value="Volgende" onclick="check()">
  </form>

  <div name="results" id="results">
    <p1>Results</p1>

  </div>

  <script src="jquery.js"></script>
  <script src="quiz.js"></script>




</body>

</html>

标签： javascripthtmljqueryvariables

解决方案

推荐阅读