独立的无线电输入，追加一个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/ 我添加了一些注释来尝试解释我做了什么。这只是一种方法，可能不是最有效的方法，但它应该足够了。