Question

我对JSON中的多维数组有点新意，我一直在用一些东西敲打我的脑袋。让我在下面发布我的代码

JSON：

{
    "easy_questions": [
        {
            "q": "Question 1",
            "a": [
                {"option":"Answer 1",   "correct": false},
                {"option":"Answer 2",   "correct":true},
                {"option":"Answer 3",   "correct":false},
                {"option":"Answer 4", "correct": false}
            ],
            "image": false,
            "source": "dsa"
        }, 
        {
            "q": "Question 2",
            "a": [
                {"option":"Answer 1",   "correct": false},
                {"option":"Answer 2",   "correct":true},
                {"option":"Answer 3",   "correct":false},
                {"option":"Answer 4", "correct": false}
            ],
            "image": false,
            "source": false
        }, // this goes on for about 7 more questions...
    ], 
    "step2_easy": [
        {
            "q": "Question 1",
            "a": [
                {"option":"Answer 1",   "correct": false},
                {"option":"Answer 2",   "correct":true},
                {"option":"Answer 3",   "correct":false},
                {"option":"Answer 4", "correct": false}
            ],
            "image": false,
            "source": false
        },
        {
            "q": "Question 2",
            "a": [
                {"option":"Answer 1",   "correct": false},
                {"option":"Answer 2",   "correct":true},
                {"option":"Answer 3",   "correct":false},
                {"option":"Answer 4", "correct": false}
            ],
            "image": false,
            "source": false
        }, //goes on again

我的JavaScript

function quizFun() {
    var questions = [];
    var answers = [];
    var quiz = "url.to/questions.json";

    $.getJSON(quiz, function(data) {
        lvl_1(data);
        function lvl_1(data) {
            var easy = data.easy_questions;

            function shuffle(array) {
                var counter = array.length, temp, index;
                    // While there are elements in the array
                    while (counter--) {
                        // Pick a random index
                        index = (Math.random() * counter) | 0;
                        // And swap the last element with it
                        temp = array[counter];
                        array[counter] = array[index];
                        array[index] = temp;
                    }

                    return array;
            }
            var randoms = shuffle(easy.slice(0));
            randoms.length = 3;

            jQuery.each(randoms, function(i, val) {
                var question = val.q,
                    sourse = val.source;
                    img = val.image;
                    answ = val.a;
                    option = null;
                    correct = null;

                $.each(answ,function(option, correct) {
                    option = this.option;
                    correct = this.correct;
                    answers = '<span data-true="'+correct+'">'+option+'</span>';

                    return answers;

                });
                if(!img) {
                    html_strucutre = question + answers;
                } else {
                    html_strucutre = question + '<img src="'+img+'" width="300">' + answers;
                }

                $('body').append(html_strucutre+'<br>');
            });
        }
    });

我知道这不是最好的，但是我试图用小步骤来解决这个问题。

首先，我需要获得3个随机问题'easy_questions'及其相应的答案（真或假）。一旦我通过其中的3个，我将跳到下一个，依此类推。

我确实设法得到问题甚至答案，但每当我试图退出$.each(answ,function(option, correct) {..}时，每个问题只返回一个答案而且总是最后一个答案。

这里到底有什么特别的错误？

Answer 1

jQuery.each与本地Array.prototype.forEach方法大致相同，这意味着它为集合中的每个事物运行一次给定的函数。这个想法是，你将它用于副作用，每次使用一次。如其他地方所述，您可以使用它在每次循环时将某些内容推送到数组中。

但是，如果您想要从功能中返回某些内容，那么更简洁的方法是改为使用jQuery.map()。

    var answers = $.map(answ, function(option, correct) {
        option = this.option;
        correct = this.correct;
        answer = '<span data-true="'+correct+'">'+option+'</span>';
        return answer;
    });

这会生成一个与answ长度相同的数组，但每个数组都包含为answer构建的字符串。然后，您可以调用.join()将其转换为一个字符串。

var myHtml = answers.join("");

使用map的数组instyead的内置$.map函数，可以完全避免使用jQuery：

    var answers = answ.map(function(option, correct) {
        option = this.option;
        correct = this.correct;
        answer = '<span data-true="'+correct+'">'+option+'</span>';
        return answer;
    });

返回$ .each函数之外的每个变量

1 个答案: