0

所以我试图做一个小测验，我希望显示每个带有他选择的问题，当用户单击下一个按钮时，当前问题被删除，下一个带有选择的问题被显示。类似的东西：

问题：什么？选择：1-a、2-b、3-c、4-d

“下一步”按钮。

并通过单击下一步删除当前问题（也是选择）并出现下一个问题：问题：为什么？选择：1-z、2-x、3-y、4-r

“下一步”按钮

这是我的html代码：

<div class="well span6 offset3">
            <script id="try" type="text/x-handlebars-template">
                <form>
                    <fieldset>
                        <legend>Login</legend>
                        <input id="fn" type="text" name="userF" class="input-block-level" placeholder="First Name">
                        <input id="ln" type="text" name="userL" class="input-block-level" placeholder="Last Name">
                        <input id="login" type="submit" class="btn btn-primary" value="login">
                    </fieldset>
                </form>
                {{#each this}}
                <div><h4>{{question}}</h4></div>
                <ul>
                {{#each choices}}
                <li><input type="radio" name="{{../question}}" value="{{this}}">{{this}}</li>
                {{/each}}
                </ul>
                {{/each}}
                <input type="submit" id="next" class="btn btn-primary" value="Next" placeholder="Next">
            </script>

这是我的数组：

var allQuestions = [
    new QuestionCreate("Which is the Capital of Australia?", ["Syndey", "Canberra", "Melbourne", "Hobart"], 2),
    new QuestionCreate("How much population there is in Australia?", ["22M", "18m", "20M", "23M"], 4),
    new QuestionCreate("How is the most expensive soccer player ever?", ["Cristiano Ronaldo", "Messi", "Zlatan Ibrahimovic", "Luis Figo"], 1),
    new QuestionCreate("Which national team as the most wins in the Fifa World Cup?", ["Italy", "Spain", "Brazil", "England"], 3)
];

这是我的编译：theTemplateScript = $("#try").html();

var theTemplate = Handlebars.compile(theTemplateScript);

$(".offset3").append(theTemplate(allQuestions));
4

2 回答 2

1

也许你可以在呈现第一个问题后做这样的事情：

var counter = 0 
$("#next").click(function() {
  $(".offset3").html("")
  counter = counter + 1 
  $(".offset3").append(theTemplate(allQuestions[counter]));
});
于 2013-07-27T21:47:44.293 回答
0

使用事件委托解决它：

theTemplateScript = $("#try").html();

var theTemplate = Handlebars.compile(theTemplateScript);

var counter = 0

$(".offset3").append(theTemplate(allQuestions[counter]));

$("div").on("click","#next", function() {
    $(".offset3").html("")
    counter = counter + 1
    $(".offset3").append(theTemplate(allQuestions[counter]));
    return counter;
});
于 2013-07-27T23:05:42.553 回答