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&nbsp;type="button"&nbsp;class="btn&nbsp;btn-secondary&nbsp;btn-sm"&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-toggle="modal"&nbsp;data-target="#editModal-{{&nbsp;forloop.counter&nbsp;}}">Edit</button>并修改您的模态div以匹配相同的内容id：<div&nbsp;class="modal&nbsp;fade"&nbsp;id="editModal-{{&nbsp;forloop.counter&nbsp;}}"&nbsp;tabindex="-1"&nbsp;role="dialog">如果你现在看看生成的源代码，你会看到有唯一的ID，如editModal-0，editModal-1，...对于每一行。