jquery：在按下下一个按钮时更改单选按钮答案

【问题标题】：jquery: changing radio buttons on pressing next buttonjquery：在按下下一个按钮时更改单选按钮
【发布时间】：2013-06-22 19:51:50
【问题描述】：

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

【问题讨论】：

所有答案中的重要一点是，您必须使用.html() 将HTML 注入#answer <span>
感谢您的建议。这有很多值得深思的地方，我会解决它们的。 tks

标签： jquery button radio-button

【解决方案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 数据结果的异步调用。

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

【讨论】：

【解决方案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>

【讨论】：

tks 但无法让它在浏览器中工作，但可以在 Fiddle 中工作。

【解决方案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>") 
//}
//});

【讨论】：