如何定位到下一個對象在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(); 

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); 
 
});

.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; 
 
}

<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 -->