Handlebars hide/show 按钮 onclick 问题

Question

我正在尝试从 JSON 中获取详细信息并获得成功，但是当我试图默认隐藏 phone 数字元素并使用 onclick 按钮显示时，它只是为第一位医生工作 DIV，但不是所有的 divs..

我想让 phone 号码默认隐藏，甚至在用户单击按钮时显示它？

      <div class="page-wrap">
    <h1>Handlebars Tutorial</h1>
    <div id="docs-container"></div>
  </div>

  <script id="docsTemplate" type="text/x-handlebars-template">
  {{#each doctors}}
    <div class="pet">
      <div class="photo-column">
        <img src="{{Image}}">
      </div>
      <div class="info-column">
        <h2>{{DoctorName}}</h2>
  <p>Designation: {{Qualification}}</p>
        <p id="tohide">Phone: {{Phone}}</p>
      </div>
    </div>
  {{/each}}
  </script>

我怎样才能做到这一点，这是我的 fiddle 我正在尝试通过 Live Example

实现

Answer 1

我在您的代码中没有看到任何按钮。看到这个例子，你可以修改它。

$('.btn_phn').on('click', function(){
    $(this).prev('.tohide').show();
})

https://jsfiddle.net/45fs64p2/4/

Handlebars hide/show 按钮 onclick 问题

Issue with Handlebars hide/show button onclick

html

jquery

json

mustache

handlebars.js