使用胡须.js一次循环访问一个测验项目

Question

我正在尝试使用JQuery，JSON和Mustache.js制作测验应用程序，但是遇到了一些麻烦。

我可以让 Mustache.js 打印出我的整个 JSON 对象集，没问题，但我想知道是否有办法让它一次只打印出一组对象。例如，我希望测验应用程序显示一个问题及其相应的可能答案集（以单选按钮形式），然后当用户选择一个答案并按下"下一步"按钮时，下一个问题和一组答案将出现并替换以前的答案。

就目前而言，我目前让 JQuery 对我的 json 文件和胡子进行 AJAX 调用.js将所有记录拉入并将它们显示在一系列 p 标签（用于问题）和 ul 标签（用于答案）中。所以现在，有没有办法让它一次只抓住一个问题？

这是我目前在脚本中的内容。请注意，这是一项正在进行的工作。

$(function(){
    $.getJSON('data.json', function(data){ //Make AJAX call to server
        var template = "{{#quiz}}" + //Create mustashe js template
            "<div class='quizarea'>" +
                "<p>{{question}}</p>" +
                "<ul>" +
                    "{{#answers}}" +
                        "<li>{{text}}</li>" +
                    "{{/answers}}" +
                "</ul>" +
            "</div>" +
        "{{/quiz}}";
        var html = Mustache.to_html(template, data);//Turn template into usable html
        $('#quizpane').html(html);//Send html to the quizpane div
    });//get JSON
});//end function

该示例可在 http://jamesdauer.com/javascript/quiz/

也许小胡子.js甚至不是要走的路？我想我可能会尝试使用车把或余烬，但我不知道这些会做得更好。我非常感谢你们能提供的任何帮助。谢谢！

Answer 1

首先，应该对代码进行一些更改。1. JavaScript：

$(function () {
var template = "<div class='quizarea'>" +
    "<p>{{question}}</p>" +
    "<ul>" +
    "{{#answers}}" +
    "<li>{{text}}</li>" +
    "{{/answers}}" +
    "</ul>" +
    "</div>";
var count = 0;
render = function () {
    var html = Mustache.to_html(template, data.quiz[count]);
    $('#quizpane').html(html);
};
render();
$("#next-question").click(function () {
    count++;
    render();
});
});

阿拉伯数字。在 HTML 中：

    <div id='quizpane'></div>
    <button name="next" id="next-question">Next question</button>

请注意，我更改了模板并向 javascript 添加了一个计数器以跟踪您当前所在的问题，而不是将整个 data 对象发送到render()而是将当前问题发送到data.quiz[count]

在小提琴上：http://jsfiddle.net/aBNVJ/1/