python - Modal Bootstrap - 源代码与 Chrome 呈现的信息不同

Question

我正在做一个电子商务项目，并且遇到了一个问题。我正在使用 Bootstrap 和 Django。对于这个长问题我深表歉意

我基本上有一个循环遍历数据库中的产品列表并列出它们。这是一张 table 。每一行都是一个新产品，单元格是有关该产品的特定信息。最后一个单元格创建一个小模式来编辑项目的当前信息。信息通过循环正确传递，但在 Chrome 的渲染中，我看到所有产品中列出的产品一的信息。

表格如下所示:

这就是我生成表的循环的样子:

<tbody>
    {% for product in products %}
    <tr>
        <td>
            <img src="{% static product.main_picture %}" style="width: 100px;">
        </td>
        <td>{{product.id}}</td>
        <td>{{product.name}}</td>
        <td>{{product.inventory_count}}</td>
        <td>{{product.sold_count}}</td>
        <td>
        <!-- Button trigger edit modal -->
        <button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#editModal">Edit</button>
         <!-- Edit product Modal -->
         <div class="modal fade" id="editModal" tabindex="-1" role="dialog">
              <div class="modal-dialog" role="document">
                   <div class="modal-content">
                       <div class="modal-header">
                           <h5 class="modal-title" id="exampleModalLabel">Edit the product</h5>
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                   <span aria-hidden="true">&times;</span>
                                </button>
                         </div>
                     <div class="modal-body">
                     <!-- Form to edit product -->
                     <form method='post' action='/dashboard/products/update'>
                     {% csrf_token %}
                         <div class="form-group">
                             <label>Name:</label>
                             <input type="text" class="form-control" name="product_name" value="{{product.name}}">
                         </div>
                         <div class="form-group">
                              <label>Picture:</label>
                              <input type="text" class="form-control-file" name="product_picture" value="{{product.main_picture}}">
                          </div>
                          <div class="form-group">
                              <label>Description:</label>
                              <input type="text" class="form-control" name="product_desc" value="{{product.description}}">
                          </div>
                          <div class="form-group">
                              <label>Inventory Count</label>
                              <input type="number" class="form-control" name="inventory_count" value="{{product.inventory_count}}">
                           </div>
                           <div class="form-group">
                               <label>Price</label>
                               <input type="number" class="form-control" name="price" value="{{product.price}}">
                            </div>
                                <input type="submit" value="Save Changes" class="btn btn-primary float-right">
                         </form>
                         <!-- End of form -->
                      </div>
                      <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                          <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                 </div>
            </div>
       </div>

这就是 Chrome 的源代码:

https://gist.github.com/amandademetrio/3f1fdc68609c9c0c3546352d3b697286

它在源代码上完美运行，但以下是我单击每个产品时显示的内容:

每个产品都会显示第一个产品的信息。

很抱歉问了这么长的问题。有没有人遇到类似的问题并可以提供帮助？谢谢!

Answer 1

您对所有产品行重复使用相同的 ID (editModal)，这是不允许的。当您单击 Edit 按钮(使用 data-target="#editModal")时，Javascript 会查找 id 为 editModal 的元素，并使用它找到的第一个。

将您的编辑按钮代码更改为

<button type="button" class="btn btn-secondary btn-sm" 
        data-toggle="modal" data-target="#editModal-{{ forloop.counter }}">Edit</button>

并修改模态 div 以匹配相同的 id:

<div class="modal fade" id="editModal-{{ forloop.counter }}" tabindex="-1" role="dialog">

如果你现在查看生成的源代码，你会看到有一些唯一的 id，例如 editModal-0、editModal-1、.. . 每行。