javascript - 单击 Twig View 中的按钮时，显示表中每个元素的对话框窗口

Question

我的 symfony 项目的 twig View 中有以下代码:

<table>
  <thead>
    <tr>
      <th>DATA 1</th>
      <th>DATA 2</th>
      <th>DATA 3</th>
      <th>DATA 4</th>
      <th>DATA 5</th>
      <th>DATA 6</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    {% for currentData in arrayData %}
      <tr>
        <td>{{ currentData.data1}}</td>
        <td>{{ currentData.data2}}</td>
        <td>{{ currentData.data3}}</td>
        <td>{{ currentData.data4}}</td>
        <td>{{ currentData.data5}}</td>
        <td>{{ currentData.data6}}</td>
        <td>
          <a><button class="btn btn-info btn-xs" id="show">Show Details</button></a> <!-- for open dialog window -->
          <a href="{{ path('editData', {'idData': currentData.idData }) }}"><button class="btn btn-warning btn-xs">Edit</button></a>
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>

<!-- dialog window-->
<dialog id="window">
  <div class="header">
    <ul class="nav nav-tabs">
        <li role="presentation" class="active">
          <a>Detail</a>
        </li>
        <button class="btn btn-danger btn-sm pull-right" id="exit">Close</button>
    </ul>
  </div>
  <div class="panel-body page-header">
    <!-- my content here -->
  </div>
</dialog>

<script>
  (function() {
    var dialog = document.getElementById('window');
    document.getElementById('show').onclick = function() {
      dialog.show();
    };
    document.getElementById('exit').onclick = function() {
      dialog.close();
    };
  })();
</script>

如您所见，这是一个基本的 html 页面。我在循环的表格中显示所有数据 {% for currentData in arrayData %} 。在此表上，有两种类型的按钮: Show Details按钮和 Edit按钮。 “编辑”按钮运行良好，没有问题，我的重定向适用于表中的所有数据，并且我可以编辑我选择的数据。

对于按钮Show Details :期望的行为是在我的页面中打开一个窗口对话框，并包含我需要为每行显示的所有数据。但事实上，当单击 Show Details 时，我的对话框窗口仅在表格的第一行起作用。 ，当我单击另一行的另一个“显示详细信息”按钮时，什么也没有发生(真的什么都没有)。

我哪里错了？

请注意，目前我不在窗口对话框中传递数据，而是通过 Ajax 和 Symfony Controller 进行传递。

Answer 1

因为id用于获取单个 dom 元素，您不应该使用相同的 id在多个 dom 元素上，您应该做的是添加一个类似 show 的类: <a><button class="btn btn-info btn-xs show" id="show">Show Details</button></a> ，然后使用document.getElementsByClassName('show')获取所有具有类 show 的按钮，然后您可以为每个事件添加事件监听器:

(function() {
    var dialog = document.getElementById('window');
    // Array of the buttons.
    var showButtons = document.getElementsByClassName('show');
    // Event handler
    var showDialog = function() {
      // Now you have to use the show button as base , to find the data you want
      // to display...
      console.log(this);
      dialog.show();
    };
    var i, len = showButtons.length;
    for(i = 0; i < len; ++i) {
        showButtons[i].onclick = showDialog;
    }
    document.getElementById('exit').onclick = function() {
      dialog.close();
    };
  })();

jsFiddle