如何使用 jstl 的 forEach 在 jsp 页面中有多个不同的 Bootstrap 模式？

Question

我正在尝试更改 jsp 页面中 Bootstrap 模态框的内容。但是所有模态都显示第一项的内容。在每一行中，前两个 <td> 显示不同的内容，但只有模态中的内容相同。

有人知道这里有什么问题吗？

我的代码：

<table>
            <c:forEach var="item" items="${itemList}">
                <tr>
                    <td>${item.title}</td>
                    <td>${item.price}</td>
                    <td>
                    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="viewDetailButton">Quick Shop</button>
                      <!-- Modal -->
                      <div class="modal fade" id="myModal" role="dialog">
                        <div class="modal-dialog">

                          <!-- Modal content-->
                          <div class="modal-content">
                            <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal">&times;</button>
                              <h4 class="modal-title">Modal Header</h4>
                            </div>
                            <div class="modal-body">
                              <div class="img">
                                <img height="150" width="150" src="${item.photoName}" />
                              </div>
                              <div class="detail">
                                  <div class="row">
                                  Color: ${item.color}
                                  </div>
                                  <hr>
                                  <div class="row">
                                  Price: ${item.price}
                                  </div>
                                  <div class="row">
                                  Size: ${item.size}
                                  </div>
                                  <%-- <div class="row">
                                  Product Description: ${item.details}
                                  </div> --%>
                              </div>
                            </div>
                            <div class="modal-footer">
                              <a href="#" class="btn btn-default" data-dismiss="modal">Add to bag</a>
                              <a href="#" class="btn btn-default" data-dismiss="modal">Add To WishList</a>
                            </div>
                          </div>

                        </div>
                      </div>
                    </td>
                </tr>
            </c:forEach>
        </table>

Answer 1

每个按钮都有相同的data-target="#myModal"。所以它的目标模态将是 id="myModal" 的第一个模态。

您可以使用 forEach 循环的 varStatus 为您的模式生成唯一的 ID 并将它们定位到您的按钮中：

<table>
        <c:forEach var="item" items="${itemList}" varStatus="vs">
            <tr>
                <td>${item.title}</td>
                <td>${item.price}</td>
                <td>
                <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal${vs.index}" id="viewDetailButton${vs.index}">Quick Shop</button>
                  <!-- Modal -->
                  <div class="modal fade" id="myModal${vs.index}" role="dialog">
                    <div class="modal-dialog">

                      <!-- Modal content-->
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                          <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div class="modal-body">
                          <div class="img">
                            <img height="150" width="150" src="${item.photoName}" />
                          </div>
                          <div class="detail">
                              <div class="row">
                              Color: ${item.color}
                              </div>
                              <hr>
                              <div class="row">
                              Price: ${item.price}
                              </div>
                              <div class="row">
                              Size: ${item.size}
                              </div>
                              <%-- <div class="row">
                              Product Description: ${item.details}
                              </div> --%>
                          </div>
                        </div>
                        <div class="modal-footer">
                          <a href="#" class="btn btn-default" data-dismiss="modal">Add to bag</a>
                          <a href="#" class="btn btn-default" data-dismiss="modal">Add To WishList</a>
                        </div>
                      </div>

                    </div>
                  </div>
                </td>
            </tr>
        </c:forEach>
    </table>

Answer 2

<script>
    function addRow(product, unit, qty = 0) {
        const tbody = document.getElementById("tbody");
        const sr = tbody.getAttribute("sr") * 1 + 1;
        tbody.setAttribute("sr", sr);

        const row = `<tr>
            <td style="padding:2px;">`+ sr + `</td>
            <td style="padding:2px;" id="productNameTable">`+ product + `</td>
            <td style="padding:2px;"id="unitTable">`+ unit + `</td>
            <td style="padding:2px;"id=`+ "quantityTable_" + sr + `>` + qty + `</td>
            <td style="padding: 2px;">
            <button class="btn btn-danger btn-xs"
                    data-toggle="modal" 
                    data-target="#myModalDelete"
                    onclick="dispatchDelete()">
            <i class="mdi mdi-delete"></i>
            </button>
            </td>
            </tr>`;

        tbody.innerHTML = tbody.innerHTML + row;
    }
</script>

如何使用 jstl 的 forEach 在 jsp 页面中有多个不同的 Bootstrap 模式？

How to have multiple different Bootstrap Modals in a jsp page using jstl's forEach?

foreach

jsp

jstl

twitter-bootstrap

bootstrap-modal