如何切换把手模板内的隐藏/显示? [英] How to toggle hide/show inside the handlebars template?

问题描述

总体而言，我是编程新手，所以我认为我的问题很容易回答.抱歉，如果某些术语有些错误，请纠正我.

I'm very new to programming in general, so I think that my question will be very easy to answer. Sorry if some of the terminologies is a bit off, please correct me.

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

How do I write a template that hides-shows different parts of one element in an array?

我有一个包含标题和文本的数组.单击相应的标题时，我需要能够显示/隐藏文本.这是HTML中的内容:

I have an array with headers and text. I need to be able to show/hide the text when the corresponding header is clicked. Here is what I have in the 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文件中的内容:

This is what's in the js file:

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

它仅将切换应用于[0]元素.我该如何更改?我可以绑定到 @index 并在click函数中使用的任何其他属性吗?

It applies toggle only to the [0] element. How can I change this? Is there any other attribute that I could bind to the @index and use in the click function?

提前谢谢！

P.S.数组:

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的< p> 标记.尝试将 index 值连接到id(类似于 ff-{@ index} )，然后使用该值进行切换.

You are repeating the ff id. Tag element ids should be unique. On the each loop you are creating 3 <p> tags with the same id. Try concatenating the index value to the id, something like ff-{@index} and use that to do the toggle.

这篇关于如何切换把手模板内的隐藏/显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！