handlebars 和 js：在 for 循环内分配不同的 id 值并在循环外引用它们

Question

在我的网页中，我正在使用把手填充 table 并从数据库中获取值：

<table>
  <tbody id="myDiv">
  {{# each alarms}}
    <tr class="row100 body">
      <td class="cell100 column1"><a href="#" id="btn_exp">{{ this.alm_id }}</a></td>
      <td class="cell100 column2><a href="#">{{ this.message }}</a></td>
      <td class="cell100 column3"><a href="#">{{ this.level }}</a></td>
    </tr>
  {{/each}}
  </tbody>
</table>

现在我希望这些行可以点击并根据行打开一个特定的弹出窗口（会有对该行的描述）。

所以我写了这个：

<script>
  var modal_exp = document.getElementById('myModal_explanatory');
  var btn_exp = document.getElementById("myBtn_exp");
  var span_exp = document.getElementById("close_exp");

  btn_exp.onclick = function() { modal_exp.style.display = "block"; }
  span_exp.onclick = function() { modal_exp.style.display = "none"; }

  window.onclick = function(event) {
    if (event.target == modal_exp) { modal_exp.style.display = "none"; }
  }
</script>

弹出窗口在 table 之外调用时效果很好。在 table 中它不起作用，问题是我为每一行分配了相同的 ID，但它不知道指的是哪一个。

我不知道如何解决这个问题。这个想法是为每一行设置不同的 id（这可以使用车把来实现，例如 id="myBtn-{{this.id}}" 但后来我不明白如何将它分配给我bin_exp 脚本中的变量。

Answer 1

使用类的方法比 ID 效果更好。类是将标识符应用于相似元素的好方法。在这种情况下，您需要一种将点击事件应用于多个 btn-exp 的方法。

要将数据传递给元素，请利用元素上的数据属性。您可以将需要的把手中的任何数据传递到属性中，以便稍后在 JavaScript 中访问。

<table>
  <tbody id="myDiv">
  {{# each alarms}}
    <tr class="row100 body">
      <td class="cell100 column1">
        <!-- Class will be used to select all .btn_exp and from their events you can access the unique data -->
        <a href="#" class="btn_exp" data-alm-id="{{this.alm_id}}">
            {{ this.alm_id }}
            </a>
       </td>
      <td class="cell100 column2><a href="#">{{ this.message }}</a></td>
      <td class="cell100 column3"><a href="#">{{ this.level }}</a></td>
    </tr>
  {{/each}}
  </tbody>
</table>

  var modal_exp = document.getElementById('myModal_explanatory');
  var btn_exp = document.querySelectorAll('.btn_exp'); // This returns a NodeList of the .btn_exp objects
  var span_exp = document.getElementById("close_exp");

  span_exp.onclick = function() { modal_exp.style.display = "none"; }

  btn_exp.forEach(function(button) {
    button.addEventListener('click', function(event) {
      // Through the event object you can get the unique instance of .btn_exp that you clicked
      var button = event.currentTarget

      modal_exp.style.display = "block";

      // If you wanted to get the data-alm-id value for this specific button you can access it like this
      var button_alm_id = button.dataset.almId // dashes are converted to Camel case 
      // ... Do what ever you want with this value 
    });
  });

有关 querySelector() 和 querySelectorAll() 的更多信息，请在此处查看 MDN https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

handlebars 和 js：在 for 循环内分配不同的 id 值并在循环外引用它们

handlebars and js: assigning different id values inside for loop and referencing them outside the loop

html

javascript

handlebars.js