Question

我遇到了一个Thymeleaf循环问题，它在嵌套div中返回了错误的对象。我希望它返回对应于顺序表行的对象，而不是返回循环中的第一个对象。代码发布在下面，注释：

<table class="striped responsive-table">
  <thead>
  <th>name</th>
  <th>url</th>
  <th>updated</th>
  <th>author</th>
  </thead>
  <tbody>

  <!-- THE BEGINNING OF THE LOOP-->
  <tr th:each="page : ${pages}">

    <!-- THIS RETURNS THE CORRECT OBJECT AND ATTRIBUTE-->
    <td><strong><span th:text="${page.name}"></span></strong></td>
    <td><a th:href="'/p-' + ${page.url}" class="waves-effect waves-light explode">
      <span th:text="'/p-' + ${page.url}"></span></a></td>
    <td th:text="${page.updated}"></td>
    <td th:text="${page.author.getUsername()}"></td>
    <td style="text-align: right;">
      <a class="btn waves-effect waves-light" th:href="'page-edit-' + ${page.id}">edit</a>
      <a class="waves-effect waves-light btn btn-flat btn-delete view"
         onclick="$('#modal1').modal('open');">delete</a>

      <!-- Modal Structure -->
      <div id="modal1" class="modal">
        <div class="modal-content center">
          <h4 style="color: darkred">Are you sure?</h4>

          <!-- HERE IS MY PROBLEM: THIS RETURNS THE FIRST OBJECT IN THE LOOP EVERY TIME -->
          <p th:text="'Confirm that you want to delete this page: ' + ${page.name}"
             style="color: darkred"></p>
        </div>
        <div class="modal-footer">
          <a href="#" class=" modal-action modal-close waves-effect waves-green btn-flat">CANCEL</a>
          <a th:href="'/page-delete-' + ${page.id}"
             class=" modal-action modal-close waves-effect waves-red btn-flat">DELETE</a>
        </div>
      </div>

      <script>
          $(document).ready(function () {
              $('#modal1').modal();

          });
      </script>
    </td>
  </tr>
  </tbody>
</table>

我如何解决这个问题？

Answer 1

您的问题是您正在使用id属性，该属性在循环内的整个DOM中必须是唯一的。您生成的HTML（您应该直接检查）具有重复项，当您的JavaScript触发时，浏览器会找到第一个匹配的元素并将其返回。

相反，您需要在data或按钮上设置tr属性，并让JavaScript点击处理程序将ID传递给模态。

Answer 2

感谢@chrylis带领我走正确的道路。这是我的解决方案。

                            <a class="waves-effect waves-light btn btn-flat btn-delete view" th:onclick="'$(\'#row-' + ${page.id} + '\').modal(\'open\');'">delete</a>
                        <!-- Modal Structure -->
                        <div th:id="'row-' + ${page.id}" class="modal">
                            <div class="modal-content center">
                                <h4 style="color: darkred">Are you sure?</h4>
                                <p th:text="'Confirm that you want to delete this page: ' + ${page.name}" style="color: darkred"></p>
                            </div>
                            <div class="modal-footer">
                                <a href="#" class=" modal-action modal-close waves-effect waves-green btn-flat">CANCEL</a>
                                <a th:href="'/page-delete-' + ${page.id}" class=" modal-action modal-close waves-effect waves-red btn-flat">DELETE</a>
                            </div>
                        </div>

                        <!-- Modal Trigger -->

                        <script th:inline="javascript">
                            /*<![CDATA[*/

                            $(document).ready(function() {
                                $(/*[['#row-' + ${page.id}]]*/).modal();
                            });

                            /*]]>*/
                        </script>

Thymeleaf th：每个循环都有嵌套的div返回错误的对象

2 个答案: