Handlebars.js 和每个助手：按钮问题

Question

我是 Handlebars.js 的新手。我正在使用每个来显示一些 account.I 需要获取特定用户单击按钮的信息。我会用代码更具体。


{{#each accounts}}

      <div class="form-group">
        <p>{{@index}}</p>
        <label for="name" value={{username}}>{{username}}</label>
      </div>
      <div class="form-group">
        <label for="name">{{email}}</label>
      </div>
      <button id="myButton">chat</button>


    {{else}}
    <p>No account</p>
    {{/each}}



<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', function(e) {
  console.log('button was clicked');
  const number = document.querySelector("p");
   console.log(number);
  });

</script>

如果我单击列表的第一个按钮，我可以访问数据，但是如果我尝试单击列表的其他按钮，我将无法访问信息。例如，如果我点击第三个按钮，我想获取第三个帐户的车把信息。

Answer 1

您的循环中有一个 id="myButton"。 ID 应该是唯一的，并且使用您的代码，您将获得与您拥有的帐户一样多的带有 id="myButton" 的按钮。如果您想在所有按钮上添加事件，请尝试添加 class。

{{#each accounts}}

      <div class="form-group">
        <p>{{@index}}</p>
        <label for="name" value={{username}}>{{username}}</label>
      </div>
      <div class="form-group">
        <label for="name">{{email}}</label>
      </div>
      <button id="myButton{{@index}}" class="myButton">chat</button>


    {{else}}
    <p>No account</p>
    {{/each}}



<script>
  const buttons = document.getElementsByClassName('myButton');
  buttons.addEventListener('click', function(e) {
  console.log('button was clicked');
  const number = document.querySelector("p");
   console.log(number);
  });

</script>

Handlebars.js 和每个助手：按钮问题

Handlebars.js and each helper : problem with buttons

handlebars.js