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

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">这是Chrome的源代码：https://gist.github.com/amandademetrio/3f1fdc68609c9c0c3546352d3b697286它可以完美地在源代码上运行，但是当我单击每个产品时，显示的内容如下：显示每个产品的第一个产品的信息。很抱歉，这个问题很长。有没有人遇到类似的问题并且可以提供帮助？谢谢！

Answer 1

您正在editModal对所有产品行重复使用相同的ID（），这是不允许的。当您单击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，...对于每一行。