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

一般来说，我对编程非常陌生，所以我认为我的问题很容易回答。对不起，如果有些术语有点不对劲，请纠正我

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

我有一个带有标题和文本的数组。我需要能够在单击相应的标题时显示/隐藏文本。以下是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>

它仅适用于[0]元素。我怎样才能改变这个？是否有任何其他属性可以绑定到

@index

并在单击功能中使用

提前谢谢你

另外，阵列：

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"
    }
  ]
}

---

您正在重复

ff

id。标记元素id应该是唯一的。在每个循环中，您将创建3个具有相同id的

标记。尝试将

索引

值连接到id，类似于

ff-{@index}

，并使用该值进行切换。

您尝试过我的答案吗？我刚刚检查过，它成功了。谢谢！

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"
    }
  ]
}