如何切換把手模板內的隱藏/顯示？

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函數中使用嗎？

先感謝您！

PS數組：

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}然后使用該值進行切換。