如何使用 ejs 将一些 JS 代码包含到 Bootstrap 模式中？

Question

我有一个 ejs 页面，它使用一些数据，包括通过 <%= items[i].id %> 和按钮添加或删除项目的循环。一旦我将删除功能转移到引导模式（创建删除确认对话框），循环就会停止工作，只有第一个数组项被删除。我正在使用 Bootstrap 4.0 及其内置的 JQuery。如果在模态之外执行，删除工作正常。感谢您的任何提示！<% for (let i=0; i<items.length; i++) { %><div class="card w-100 p-3">  <form method="post" >    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">      <div class="card-header">        <%= items[i].name  %>      </div>      <div class="card-body">        <p class="card-text"> <%= items[i].desc  %> </p>      </div>      <button formaction="/project" type="submit" class="btn btn-outline-dark" name="editButton" value="<%= items[i].id  %>">Edit</button>      <button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteModal">Delete</button>    </div>  </form></div><!-- Delete Modal --> <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">  <div class="modal-dialog" role="document">    <div class="modal-content">      <div class="modal-body">        <form class="form-control" action="/delete" method="post">          <p>Are you sure you want to delete <%= items[i].name  %> ? </p>        <button type="submit" class="btn btn-outline-danger" name="deleteButton" value="<%= items[i].id  %>">Delete</button>        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>        </form>      </div>    </div>  </div></div> <% } %>

Answer 1

都<div class="model...具有相同的id属性。当您单击删除按钮时，只会打开第一个模式。添加<%= i %>为后缀id：

<% for (let i=0; i<items.length; i++) { %>

    <div class="card w-100 p-3">

        <form method="post">

            ...

            <button data-target="#deleteModal<%= i %>" type="button" class="btn btn-outline-danger" data-toggle="modal" >Delete</button>

        </form>

    </div>

    <!-- Delete Modal -->

    <div id="deleteModal<%= i %>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

        ...

    </div> 

<% } %>