javascript - 如何使用单选按钮连接数组元素

Question

我正在尝试使用单选按钮选项进行简单的测验。该测验有一个按钮，可以动态删除和添加下一个问题，以及一组单选按钮。问题和选项存储在单独的数组中。我一直试图用单选按钮连接每个选项。有什么想法如何处理这个问题吗？

附注刚开始学习 JS，你可能会从我的代码中看出

<script type="text/javascript">
var questionsArray = new Array();
questionsArray[0] = "1. Who's the president of the US?";
questionsArray[1] = "2. What is the capital city of France?";
questionsArray[2] = "3. What is your favorite food?";

var choicesArray = new Array();
choicesArray[0] = ["Lebron James", "Barack Obama", "George Bush","George Clooney"];
choicesArray[1] = ["Nairobi","London","Paris","Sydney"];
choicesArray[2] = ["Pizza","Sushi","Pasta","Lobster"];

function createRadioElement(name){
  var radioHTML = '<input type="radio" name="'+name+'"'+'/>';

  var radioFragment = document.createElement("div");
  radioFragment.innerHTML = radioHTML;

  return radioFragment.firstChild;
}

var index = -1;
function questionSwapOnclick(){
  while(index < questionsArray.length){
    index++;
    document.getElementById("question").innerHTML = questionsArray[index];

    if(document.getElementById("question").innerHTML == "undefined"){
      document.getElementById("question").innerHTML = "Finished the quiz!"
      document.getElementById("choices").innerHTML = ""
    }

    var splitChoices = choicesArray[index].join("<br />");
    document.getElementById("choices").innerHTML = splitChoices;
    return true;
  }
}

</script>

Answer 1

为什么不将问题保留在 html 中？ JS Fiddle

<form id="questions">
<div class="question active">
    <p>1. Who's the president of the US?</p>
    <label>
        <input type="radio" name="q1" value="1">Lebron James</label>
    <label>
        <input type="radio" name="q1" value="2">Barack Obama</label>
    <label>
        <input type="radio" name="q1" value="3">George Bush</label>
</div>
<div class="question" style="display: none;">
    <p>2. What is the capital city of France?</p><label>
        <input type="radio" name="q2" value="1">Nairobi</label>
    <label>
        <input type="radio" name="q2" value="2">London</label>
    <label>
        <input type="radio" name="q2" value="3">Paris</label>
</div>
<div class="question" style="display: none;">
    <p>3. What is your favorite food?</p>
    <input type="radio" name="q3" value="1">Pizza</label>
    <label>
        <input type="radio" name="q3" value="2">Sushi</label>
    <label>
        <input type="radio" name="q3" value="3">Pasta</label>
</div>
<hr> <a href="#" id="next">Next question »</a>

// used jquery 1.11.0
$(function () {

var questions = $('#questions');
var next_btn = $('#next');

next_btn.on('click', function () {
    var active_question = questions.find('.active');

    if (active_question.find('input[type=radio]:checked').length) {
        active_question.slideUp(500, function(){
            active_question.removeClass('active');
        });
        if(active_question.next('.question').length){
            active_question.next('.question').addClass('active').slideDown(500);
        }
        else {
            alert('Thank you!');
            alert(questions.serialize());
            questions.hide();
        }
    }
    else {
        alert('Select answer!');
    }
});
});