Question

我正在做一个电子商务项目，我感到很困惑。我正在使用Bootstrap和Django。对于很长的问题我深表歉意

基本上，我有一个循环遍历数据库中的产品列表并列出它们。这是一张桌子。每行是一个新产品，单元格是有关该产品的特定信息。最后一个单元格创建一个小模态来编辑项目中的当前信息。该信息已正确地通过循环传递，但是在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的元素，并使用找到的第一个元素。

将您的Edit按钮代码更改为

<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，...。

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

1 个答案: