javascript - 使用 jQuery 计算数组中的对象以更改进度条

Question

我有一些示例数据，如下所示:

var data = {
    "section": {
        "1": {
            "question": [{
                "id": "1a",
                "num": "1",
                "title": "test"
            }, {
                "id": "1b",
                "num": "2",
                "title": "test"
            }]
        },
        "2": {
            "question": [{
                "id": "2a",
                "num": "1",
                "title": "test"
            }, {
                "id": "2b",
                "num": "2",
                "title": "test"
            }]
        }
    }
}

我试图用这个来计算问题的数量。因此，对于这个数据样本，总共有 4 个问题......

计划是使用此数据更新进度表宽度:

<div id="progress"><div id="bar"></div></div>

这是我开始整理的 JS 代码:

var number = 0, numQuestions, total, width;

function updateProgress() {

    number += 1;

    numQuestions = data.question;

    //total =

    width = total / number;

    $('#progress #bar').animate({'width':width});

}

要获得宽度，我猜我需要将两个部分和问题添加在一起，并将其除以进度条的宽度，然后将进度的宽度设置为那个数字的数字？？

有人可以提供一些帮助并指出我正确的方向吗？

主要问题是:

• numQuestions 返回未定义，所以显然我做错了
• 我不确定如何计算总数...这应该是根据 numQuestions 计算的 #progress #bar 宽度吗？或者完全是别的什么？

Answer 1

我建议按如下方式修改您的数据结构:

var data = {
    "sections": [ // sections is now an array instead of an object
        {
            "question": [{
                "id": "1a",
                "num": "1",
                "title": "test"
            }, {
                "id": "1b",
                "num": "2",
                "title": "test"
            }]
        },
        {
            "question": [{
                "id": "2a",
                "num": "1",
                "title": "test"
            }, {
                "id": "2b",
                "num": "2",
                "title": "test"
            }]
        }
    ]
}

除非您需要命名这些部分，否则无需键入它们。

然后您可以像这样获取部分的数量:

var numSections = data.sections.length;

要获取所有部分中的问题总数，您需要创建一个循环:

var numQuestions = 0;
for (var i = 0; i < data.sections.length; i++){
    var questions = data.sections[i].question;
    for (var j = 0; j < questions.length; j++){
        numQuestions++;
    }
}

然后，要更新进度条，您需要:

function updateProgress() {
    number++;
    width = number / numQuestions * 100;
    $('#progress #bar').animate({'width':width + '%'});
}

您希望#progress具有设定的宽度，并且#bar具有基于百分比的宽度，范围从0到100%。

如果您需要命名各个部分，您可以计算问题的数量，如下所示:

var numQuestions = 0;
for (var sect in data.section){
    var questions = data.section[sect].question;
    for (var j = 0; j < questions.length; j++){
        numQuestions++;
    }
}

您可以在这里看到所有这些工作:http://jsfiddle.net/wAGHS/1/