jQuery单击方法在迭代嵌套在另一个数组中嵌套的对象中的数组时返回未定义

Question

为什么在 for in 循环遍历第一个答案对象数组后 click 方法返回 undefined ？

var i = 0;
var j = 0;

var allQuestions = [{question:"What is the color of the sky?",answer:["blue","yellow",  
                "red"],correctAnswer:["blue",1]},{question:"What is the opposite of  
                 up?",answer:["down","sideways", "circle"],correctAnswer:["down",1]},
                {question:"What is the first number?",answer:["1","5", "7"],correctAnswer:
                ["1",1]}];

$(document).ready(function() {  

    function changeQuestion() {
        $("#radios").empty();
        for( answers in allQuestions[i].answer) {
            var radioBtn = $('<input type="radio" class="radios" name="btnAnswers" value="'+ 
                allQuestions[i].answer[j] + '" /><label for ="secondbtn">'
                + allQuestions[i].answer[j] + '</label>');
            radioBtn.appendTo('#radios');
            alert(allQuestions[i].answer[j]);
            j++;
        }
        i++;
        return true;
    };

    $("#nextbtn").click(function(){
        changeQuestion();
    });
});

这个问题的小提琴

Answer 1

由于对象的.answer属性是一个数组，您可以循环使用

for(var j=0; allQuestions[i].answer.length; j++) {...}

代替

for(answers in allQuestions[i].answer) {...}

完整代码将是：

$(document).ready(function() {
    var i = 0;
    function changeQuestion() {
        $("#radios").empty();
        var obj = allQuestions[i];
        for(var j=0; j<obj.answer.length; j++) {
            $('<input type="radio" class="radios" name="btnAnswers" value="' + obj.answer[j] + '" /><label for ="secondbtn">' + obj.answer[j] + '</label>').appendTo('#radios');
        }
        i++;
    };
    $("#nextbtn").click(changeQuestion);
});

https://jsfiddle.net/zu9e5poh/10/

Answer 2

你必须初始化变量 i & j 的值

修改代码为

    $(document).ready(function() {  
function changeQuestion() {
$("#radios").empty();

var  i=0, j=0;

for( answers in allQuestions[i].answer) {
    var radioBtn = $('<input type="radio" class="radios" name="btnAnswers" value="'+ 
                    allQuestions[i].answer[j] + '" /><label for ="secondbtn">' 
            + allQuestions[i].answer[j] + '</label>');
    radioBtn.appendTo('#radios');
    alert(allQuestions[i].answer[j]);
 j++;
}
 i++;
 return true;
};
$("#nextbtn").click(function(){
    changeQuestion();
 });

});