Question

（JavaScript和jQuery初学者 - 请温柔。）

我正在尝试制作我的第一个JavaScript / jQuery应用程序 - 一个简单的测验，包含三个问题，仅一个按钮，最后输出最终得分。我已经收到了所有东西，但单选按钮检查 - 难倒了。无法弄清楚如何查看选中的单选按钮是否是正确的答案（下面的初始数组中的'correctAnswer'）。感谢任何帮助。

QUIZ.JS

$(document).ready(function(){

var allQuestions = [
{question: "1: Who is Prime Minister of the United Kingdom?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer:0},
{question: "2: What is Barack Obama's middle name?", choices: ["Liberal", "Hussein", "Osama", "Joseph"], correctAnswer:1},
{question: "3: Who was President during the Civil War?", choices: ["Harry Truman", "John Tyler", "Abraham Lincoln", "John Adams"], correctAnswer:2}
];

var i = 0; //keep track of which question we're displaying.
var numCorrect = 0; // keep track of the number of correct answers.


    $("button").on('click',function(){  //when the button is clicked,

         // display the next question and all the possible answers...
         if (i < allQuestions.length) //if the question counter is less than the length of the array of answers...
           {
            $('#question').remove();  //remove the current question...
            $('.answerlist').remove();  //and remove the current list of answers...
            $('#questionhead').after('<p id="question">' + allQuestions[i]['question'] + '</p>'); //display the current question
            $('#answerhead').after("<form id='answerform'>");

            // display all the answers for the current question
            for (q=0; q < allQuestions[i]['choices'].length; q++){
               $('#answerform').after("<div class='answerlist'> <input type='radio' name='" +  allQuestions[i]['choices'][q]  +  "'>" + allQuestions[i]['choices'][q] + '<br /></div>');
               }
            $('button').before("</form>");

           i += 1;

           } else {
           $('#questionhead').remove();
           $('#answerhead').remove();
           $('#question').remove();  //remove the current question...
           $('.answerlist').remove();  //and remove the current list of answers...
           $('button').before('<h3>Final score:</h3> You got ' + numCorrect + ' out of 3 questions correct.');
           $('button').remove();
            }
    });

});

HTML页面：

<html>

  <head>

    </head>

 <body>
<h1>JavaScript Quiz</h1>
<hr>


<h2 id = "questionhead">Question</h2>

<h2 id="answerhead">Answer</h2>

<p></p>
<button type = "button">Next Question</button>

<!-- Best practice: Load javascript file and jQuery at bottom of page, just before <body> tag. -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="quiz.js"></script>



</body>

</html>

这是jsfiddle： http://jsfiddle.net/9pjW6/

Answer 1

您可以将data-id属性添加到输入中，并检查所选输入数据ID是否与您的正确答案编号匹配。类似的东西：

$("button").on('click',function(){

       if($("input:checked").length){
           if($("input:checked").attr("data-id")==allQuestions[i-1].correctAnswer){
               numCorrect+=1;
           }
       }

if (i < allQuestions.length) {

 //etc
for (q=0; q < allQuestions[i]['choices'].length; q++){
               $('#answerform').after("<div  class='answerlist'> <input data-id='"+q+"' type='radio' name='" +  allQuestions[i]['choices'][q]  +  "'>" + allQuestions[i]['choices'][q] + '<br /></div>');
 }
//etc

}

完整代码：http://jsfiddle.net/6TUYM/2/

如何将选中的单选按钮与特定数组值进行比较？

1 个答案: