Javascript 一次只显示一个内容（在HTML上使用{{each}}）

我使用手柄

{{each}}

来显示内容

每个内容在div框中显示其数据，因此垂直显示多个内容，如：

  ______
 |      |
 |      |
 |______|
  ______
 |      |
 |      |
 |______|

//.. and so on

相反，我希望一次显示一个内容，并能够通过一个按钮切换到下一个内容

右下角有一个按钮，暂时不起任何作用

  ______
 |      |
 |      |
 |___[>]| //click on the button, and the next content will display 

---

HTML/把手代码：

 {{#each family}}
   <div class="content-wrapper">                  
    <h1>{{surName}}</h1>             

    {{#each member}}                
       <h2>{{firstName}}</h2>         
    {{/each}}      
    <button id="btn-next" type="submit">Next</button>
   </div>      
 {{/each}} 

{{{#每个家庭}
{{姓氏}
{{#每个成员}
{{firstName}}
{{/每个}}
下一个
{{/每个}}

---

有什么好方法可以实现这一点吗？

最好将逻辑放在javascript中。例如：将当前成员存储在族对象上

但Handlebar确实有if语句，因此您可以执行类似以下代码段的操作：

var上下文={
姓氏：'最后'，
selectedx:0，//所选家庭成员的从零开始的索引
成员：null，//为把手选择的族成员
成员:[
{firstName:'first1'，姓氏：'last'}，
{firstName:'first2'，姓氏：'last'}，
{firstName:'first3'，姓氏：'last'}，
],
};
render（）；
函数render（）{
//设置把手的选定成员
context.member=context.members[context.selectedx]
var source=document.getElementById（“fam模板”）.innerHTML；
var template=handlebar.compile（源代码）；
document.getElementById（“fam”）.innerHTML=模板（上下文）；
//绑定到上面添加的按钮的单击事件
//每次单击“下一步”按钮时都需要执行此操作
//因为按钮位于把手模板内
$（“#btn next”）。单击（handleClick）；
}
函数handleClick（）{
//转移到下一个家庭成员
上下文。选择edidx++；
//环绕
if（context.selectedx>=context.members.length）{
context.selectedx=0；
}
//重新渲染
render（）；
}

{{姓氏}
{{member.firstName}
下一个

handlerbar没有逻辑：如果你通过设计阻止模板中的逻辑（就像mustache那样）将逻辑放在其他地方，那么你的模板最终会变得整洁。@M.Gara我明白了，你能告诉我如何“将逻辑放在其他地方”吗？刚开始学习node.js等。另外，分页（一次显示一个页面）是一种解决方案还是一个坏主意？当您按下“下一步”按钮时，代码片段仍然显示相同的值按钮不起任何作用。这段代码只是为了说明可以使用if语句。我知道if语句，但不知道如何使用。我回答了一次显示一个if语句的问题。您现在是否在询问如何更改显示的按钮？@ipid I更新了该代码段，以使用jquery处理单击事件。最好将按钮移到模板之外，这样就不需要重新绑定单击事件。Angular通过为您处理更改而简化了这一过程，无需重新渲染或重新绑定。