Question

我是Handlebars.js的新手。我正在使用每个帐户来显示一些帐户。我需要获取特定用户单击按钮的信息。我将更详细地介绍代码。


{{#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>

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

Answer 1

您的循环中有一个id =“ myButton”。 ID应该是唯一的，并且通过您的代码，您将拥有与拥有帐户一样多的id =“ myButton”按钮。如果要在所有按钮上添加事件，请尝试添加类。

{{#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和每个助手：按钮问题

1 个答案: