单独的无线电输入，将 div 附加到正确的输入

Question

我的代码：

$(document).ready(function () {
    $("input").focus(function () {
        $(this).css('outline-color', '#559FFF');
        $(this).blur(function () {
            $(this).css("outline-color", "#FF0000");
        });
    });
    $("input").click(function () {
        var value = $(this).val(function () {
            $(this).html("");
        });
    });
    $(".awesome").click(function () {
        var toStore = $("input[name=name]").val();
        if (!/^[A-Za-z]+ [A-Za-z]+$/.test(toStore)) {
            alert("You Must Put a Valid Name");
        } else {
            $("#contain").children().fadeOut(1000);
            $("#contain").delay(1000).queue(function () {
                $("#contain").append("<p>Welcome to My Quiz : " + toStore + "</br>" +
                    "Youll Get 10 Questions To Answer </br> " +
                    "Here Is the First One:</p>");

                var allQuestions = {
                    outquestions:{
                        question1 : {    quest: "What number was Michel Jorden?",
                            choices: ["22","32","23","5"],
                            correctAnswer: "23"},
                    question2 : {    quest: "what contries are with the border of israel?",
                            choices: ["eygpt,iraq syria and lebanon","jordan iraq iran and lebanon","eygpt,iraq kuwiet and lebanon","eygpt lebanon jordan and syria"],
                            correctAnswer: "eygpt lebanon jordan and syria"},
                    question3 : {    quest: "who was the lead singer of queen?",
                            choices: ["jhon lenon","freddie mercury","neil young","bob dylan"],
                            correctAnswer: "freddie mercury"},
                    question4 : {    quest: "the island australia once was belong to?",
                            choices: ["UK","US","germany","UA"],
                            correctAnswer: "UK"},
                    question5 : {    quest: "What is the number of states in USA?",
                            choices: ["25","60","50","54"],
                            correctAnswer: "50"},
                    question6 : {    quest: "who was the first prime minister of israel?",
                            choices: ["David ben gurion","hertzel","rabin","beegin"],
                            correctAnswer: "david ben gurion"},
                    question7 : {    quest: "when was the ym kipur war?",
                            choices: ["79","73","71","69"],
                            correctAnswer: "73"},
                    question8 : {    quest: "when was the yaer of the anoncment israel?",
                            choices: ["45","50","44","48"],
                            correctAnswer: "48"},
                    question9 : {    quest: "Who is the prime minister of israel?",
                            choices: ["bibi","lapid","sheli","liberman"],
                            correctAnswer: "bibi"},
                    question10 : {    quest: "What is the first name of jobs from apple company?",
                            choices: ["steve","bob","jhon","dude"],
                            correctAnswer: "steve"}
                    },
                    correctAnswers: 0
                };

                var outquestions = allQuestions["outquestions"];
                for (var question in outquestions) {
                    $("#contain").append("<p>" + outquestions[question]['quest'] + "</p>");
                    for (var choice in outquestions[question]["choices"]) {
                        $("#contain").append("<p><input type='radio' name=question value=choice>" +outquestions[question]["choices"][choice] + "</p>");
                    }
                }
                $("#contain").append("<form><input type='button' id='test' value='test' name='SbBt'/></form>");
           $("#test").click(function(){
           var storeq = $("input[name=question]").val(function(){
           $(this).append("<div class='vi'></div><div class='vi2'></div>");
           });
           });
            });
        }
    });
});

我有两个问题要解决。

首先，当我添加输入时，我会尝试为每个问题选择一个单选按钮。但是我只能为所有问题选择一个单选按钮。

第二件事是我想获取所选单选按钮的值并检查它是否与correctAnswer 匹配。如果是，我想在该单选按钮上附加一个像V 这样的符号，这样客户就会知道他的回答正确。

这是我的完整代码： http://jsfiddle.net/QPpMT/

Answer 1

为了快速回答您的部分问题，您的单选按钮被链接的原因是因为它们基于输入中的名称元素。您可以通过向问题对象添加唯一名称并在遍历它们时进行设置来解决此问题。

更改以下行应该会给您想要的结果：

$("#contain").append("<p><input type='radio' name="+ question +" value="+ outquestions[question]['choices'][choice] +">" +outquestions[question]['choices'][choice] + "</p>");

至于第二部分，如果您想要他们点击的内容的即时结果，只需添加一个 onclick 函数来检查正确答案并附加适当的 div/元素/图标。您可能最好在此处使用 :checked 选择器来帮助查找相应单选按钮的值。您可能需要将问题变量移动到 get 类型函数，以便其他函数可以轻松访问它。

如果您需要更详细的代码说明，我很乐意提供。

编辑：我看到你刚刚发布了一个小提琴，我会看看并相应地编辑。

做了一些改动：http://jsfiddle.net/njgray/QPpMT/3/ 我添加了一些 cmets 来尝试解释我做了什么。这只是一种方法，可能不是最有效的，但应该足够了。