如何在javascript中导航到下一个对象

Question

https://codepen.io/abhilashn/pen/BRepQz

// JavaScript文档

var quiz = { "JS" : [
    {
        "id" : 1,
        "question" : "Inside which HTML element do we put the JavaScript?",
        "options" : [
            {"a": "<script>", "b":"<javascript>", "c":"<scripting>", "d":"<js>"}
            ],
        "answer":"<script>",
    },
    {
        "id" : 2,
        "question" : "What is the correct JavaScript syntax to change the content of the HTML element below.",
        "options" : [
            {"a": "document.getElementById('demo').innerHTML = 'Hello World!';", 
             "b":"document.getElementByName('p').innerHTML = 'Hello World!';", 
             "c":"document.getElement('p').innerHTML = 'Hello World!';",
             "d":"#demo.innerHTML = 'Hello World!';"}
            ],
        "answer":"a",
    }
    ]
}





var score = 0;      
var qno = 1;
var currentque = 0;
var totalque = quiz.JS.length;


displayQuiz = function(cque) {
    currentque = cque;
    $("#qid").html(this.qno);
    //console.log(quiz.JS[currentque].options[0]);

    $("#question").html(quiz.JS[currentque].question);  
    for (var key in quiz.JS[currentque].options[0]) {
      if (quiz.JS[currentque].options[0].hasOwnProperty(key)) {
        console.log(key + " -> " + quiz.JS[currentque].options[0][key]);
        $("#question-options").append(
            "<div class='form-check option-block'>" +
            "<label class='form-check-label'>" +
                      "<input type='radio' class='form-check-input' name='option'   id='q"+key+"' value='" + quiz.JS[currentque].options[0][key] + "'>" +
                          quiz.JS[currentque].options[0][key] +
                     "</label>"
        );
      }
    }
}

checkAnswer = function(option) {
    var answer = quiz.JS[currentque].answer;
    option = option.replace(/\</g,"&lt;")   //for <
    option = option.replace(/\>/g,"&gt;")   //for >

    if(option ==  quiz.JS[currentque].answer) {
        score = score + 1;

    }
}   

changeQuestion = function(cque) {
        currentque = currentque + cque;
        displayQuiz(currentque);    

}







$(document).ready(function() {
        displayQuiz(0);     
});


 $('input[type=radio][name=option]').change(function() {
    if (this.checked) {
        checkAnswer(value);
    }
});

$('#next').click(function() {
        changeQuestion(1);
}); 

Answer 1

您需要使用以下更改修改解决方案：
1）单击下一个时更新问题编号  $("#qid").html(this.qno++);//<--Update question number

2）您需要清除div，以便显示下一个问题的选项。只需追加即可继续添加选项。

$("#question").html(quiz.JS[currentque].question);
      $("#question-options").html("");//<--Clear previous question

3）修改下一个按钮的点击处理程序，如下所示：

$('#next').click(function(e) {
      e.preventDefault();

＆＃13;

＆＃13;

var quiz = {
  "JS": [{
      "id": 1,
      "question": "Inside which HTML element do we put the JavaScript?",
      "options": [{
        "a": "<script>",
        "b": "<javascript>",
        "c": "<scripting>",
        "d": "<js>"
      }],
      "answer": "<script>",
    },
    {
      "id": 2,
      "question": "What is the correct JavaScript syntax to change the content of the HTML element below.",
      "options": [{
        "a": "document.getElementById('demo').innerHTML = 'Hello World!';",
        "b": "document.getElementByName('p').innerHTML = 'Hello World!';",
        "c": "document.getElement('p').innerHTML = 'Hello World!';",
        "d": "#demo.innerHTML = 'Hello World!';"
      }],
      "answer": "a",
    }
  ]
}





var score = 0;
var qno = 1;
var currentque = 0;
var totalque = quiz.JS.length;


displayQuiz = function(cque) {
  currentque = cque;
  $("#qid").html(this.qno++);//<--Update question number
  //console.log(quiz.JS[currentque].options[0]);

  $("#question").html(quiz.JS[currentque].question);
  $("#question-options").html("");//<--Clear previous question
  for (var key in quiz.JS[currentque].options[0]) {
    if (quiz.JS[currentque].options[0].hasOwnProperty(key)) {
      

      $("#question-options").append(
        "<div class='form-check option-block'>" +
        "<label class='form-check-label'>" +
        "<input type='radio' class='form-check-input' name='option'   id='q" + key + "' value='" + quiz.JS[currentque].options[0][key] + "'>" +
        quiz.JS[currentque].options[0][key] +
        "</label>"
      );
    }
  }
}

checkAnswer = function(option) {
  var answer = quiz.JS[currentque].answer;
  option = option.replace(/\</g, "&lt;") //for <
  option = option.replace(/\>/g, "&gt;") //for >

  if (option == quiz.JS[currentque].answer) {
    score = score + 1;

  }
}

changeQuestion = function(cque) {
  currentque = currentque + cque;
  displayQuiz(currentque);

}







$(document).ready(function() {
  displayQuiz(0);
});


$('input[type=radio][name=option]').change(function() {
  if (this.checked) {
    checkAnswer(value);
  }
});

$('#next').click(function(e) {
  e.preventDefault();
  changeQuestion(1);
});

＆＃13;

.content {
  margin-top: 54px;
}

.quiz-body {
  margin-top: 50px;
  padding-bottom: 50px;
}

.option-block-container {
  margin-top: 20px;
}

.option-block {
  padding: 10px;
  background: aliceblue;
  border: 1px solid #84c5fe;
  margin-bottom: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-primary">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
  <a class="navbar-brand" href="#">JS Quiz</a>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="nav navbar-nav mr-auto"></ul>

  </div>
</nav>
<div class="content">
  <div class="container-fluid">

    <div class="row">
      <div class="col-sm-8">
        <div class="quiz-body">
          <form name="quizForm">
            <fieldset class="form-group">
              <h4><span id="qid">1.</span> <span id="question"></span></h4>

              <div class="option-block-container" id="question-options">

              </div>
              <!-- End of option block -->
            </fieldset>

            <button name="next" id="next" class="btn btn-success">Next</button>
          </form>
        </div>
      </div>
      <!-- End of col-sm-8 -->
      <div class="col-sm-4">

      </div>
    </div>
    <!-- End of row -->
  </div>
  <!-- ENd of container fluid -->
</div>
<!-- End of content -->

＆＃13;

＆＃13;

＆＃13;