Question

<!DOCTYPE html>
<html>
<head>
<Title> Title: My Quiz </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div>
<span id="question">Welcom to my Game hit next to play...</span>
</br>
<span id="answer" >possible answers will go here...</span>
</br>

<button id ="up"> next </button> 
</div>


<script>
var allQuestions = [["Who is Prime Minister of the United Kingdom?","What is my favourite colour?"], [["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],["red","blue","green","another"]], [0,1]];
var questionIndex = 0

$("#up").on("click", function () {
questionIndex+=1
$("#question").text("questionIndex = "+ questionIndex + "--Question " + questionIndex +": " + allQuestions[0][questionIndex-1]) 
});


//$("#up").on("click", function () {

//for(i=0;i<4;i++){
//$("#answer").text("<input type="radio" name="group1" value="Milk">" +allQuestions[1][questionIndex-1][0]+ "<br>") 
//}
//});

</script>

</body>
</html>

如何将“span id =”answer“”更改为

<input type="radio" name="colour" value="blue">Blue<br>
<input type="radio" name="colour" value="red">Red<br>
<input type="radio" name="colour" value="green">Green<br>
<input type="radio" name="colour" value="another">Another<br>

我要做的是将'span id =“answer”'更改为单选按钮，然后按下，将显示下一组答案。这已经适用于'span id =“question”'（需要一点整理）。

Relevant JSFiddle Link

Answer 1

我开始尝试让它工作

http://jsfiddle.net/G3wsd/8/

var allQuestions = ["Who is Prime Minister of the United Kingdom?","What is my favourite colour?"];
var allAnswers = [["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],["red","blue","green","another"]];
var index = 0

$("#up").on("click", function () {
    $("#question").text("Question " + (index + 1) +": " + allQuestions[index]) 

    var answers = '';
    $(allAnswers[index]).each(function(i) {
        answers += '<input type="radio" name="group' + index + '" value="' + allAnswers[index][i] + '">' + allAnswers[index][i] + '<br>'
    });

    $("#answer").html(answers);

    index+=1;
}
);

但我不认为这是获得结果的最佳方式。我建议使用JSON数据结果进行一些异步调用。

我会更多地看一下，看看我是否能提供更多帮助，但希望这会帮助你开始。

Answer 2

我也试了一下（这个例子是独立的并且经过测试），但是花了比威廉更长的时间......干得好，威廉。

jsFiddle here

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                var allQuestions = ["Who is Prime Minister of the United Kingdom?","What is my favourite colour?"];
                var allAnswers = ["Gordon Brown|Tony Blair|Mohammed Al Fayed|Barack Obama","Green|Red|Blue|Brown"];
                var questionIndex = 0
                var ndx = 0

                $("#up").on("click", function () {
                    questionIndex+=1
                    $('#question').text(allQuestions[ndx]);
                    var xx = allAnswers[ndx];
                    var yy = makeHTML(xx);
                    $('#answer').html(yy);
                    ndx++;
                });


                function makeHTML(arr) {
                    var aAns = arr.split('|');
                    var h = '<input type="radio" name="color" value="' +aAns[0]+ '">' +aAns[0]+ '<br><input type="radio" name="color" value="' +aAns[1]+ '">' +aAns[1]+ '<br><input type="radio" name="color" value="' +aAns[2]+ '">' +aAns[2]+ '<br><input type="radio" name="color" value="' +aAns[3]+ '">' +aAns[3]+ '<br>';
                    return h;
                }


            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div>
        <span id="question">Welcome to my Game hit next to play...</span>
        </br>
        <span id="answer" >possible answers will go here...</span>
        </br>
        <button id ="up"> next </button> 
    </div>


</body>
</html>

Answer 3

我的解决方案可能是最糟糕的一个......我把所有人保存在一个阵列中。：d

var allQuestions = [
["Who is Prime Minister of the United Kingdom?","What is my favourite colour?"],
 [["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],["red","blue","green","another"]], [0,1]];
var questionIndex = 0;

$("#up").on("click", function () {
questionIndex+=1
$("#question").text("questionIndex = "+ questionIndex + "--Question " + questionIndex +": " + allQuestions[0][questionIndex-1]);

answers=allQuestions[1][questionIndex-1];

ans_html='';
for(i=0;i<answers.length;i++) {

ans_html+='<input type="radio" name="'+allQuestions[0][questionIndex-1]+'" value="'+answers[i]+'">'+answers[i]+'<br>';  

}

$("#answer").html(

ans_html



);
});


//$("#up").on("click", function () {

//for(i=0;i<4;i++){
//$("#answer").text("<input type="radio" name="group1" value="Milk">" +allQuestions[1][questionIndex-1][0]+ "<br>") 
//}
//});

jquery：按下按钮时更改单选按钮

3 个答案: