如何在把手模板内切换隐藏/显示？

Question

我对编程很新，所以我认为我的问题很容易回答。对不起，如果有些术语有点偏，请纠正我。

如何编写隐藏的模板 - 显示数组中一个元素的不同部分？

我有一个带标题和文本的数组。我需要能够在单击相应的标题时显示/隐藏文本。这是我在HTML中的内容：

<script id="maino" type="text/x-handlebars-template">
    <div class="row">
      {{#each names}}
          <div class="col-xs-12 col-md-3"> 
            <div data-id="{{@index}}">
                 <h4 id="button" > {{name}} </h4>
                 <p id="ff" >{{text}}</p>
            </div>
          </div> 
      {{/each}}
    </div>
</script>

这是js文件中的内容：

$("#button").click(function(){
    console.log(this);
    var a = "#ff";
    $(a).toggle();
});

它仅将切换应用于[0]元素。我怎么能改变这个？是否有任何其他属性可以绑定到@index并在click函数中使用？

先感谢您！

附：数组：

var banners = {
names: [
    {
        name: "Lorem ipsum",
        text: "dolor sit amet, consectetur "
    },
    {           
        name: "aboris nisi",
        text: "Duis aute irure dolor in reprehenderit "
    },
    {
        name: "culpa officia",
        text: "ccaecat cupidatat non"
    }
  ]
}

Answer 1

你正在重复ff id。标签元素ID应该是唯一的。在每个循环中，您将创建3个具有相同ID的<p>标记。尝试将index值连接到id，类似于ff-{@index}并使用它来进行切换。