twitter-bootstrap - 如何使用 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>