添加了一个带有引导程序的可点击弹出窗口，但每个弹出窗口都是相同的

Question

我正在索引页面上的数据库中循环显示某人上传的所有图片。从那里我认为如果你可以点击任何你喜欢的东西，它会是厨师，它会弹出更大让你仔细看看。我在引导程序中找到了这样做的代码。唯一的问题是 - 每张图片都是不同的，但是当我点击它们时，它们都会弹出来是同一张图片。

我尝试在代码流中放置 puts 语句，它肯定会识别它一直在循环，直到我越过注释为“模态”的地方，这就是它开始中断的地方。我不知道为什么

<% @painting.each do |paintwork| %>
  <% if paintwork.profile_id.to_i == @profile.id.to_i %>
    <div class="col-md-3">
      <% if paintwork.artwork.attached? %>
        <!-- Button trigger modal -->
        <button type="button" class="btn popart" data-toggle="modal" data-target="#exampleModalCenter">
          <%= image_tag paintwork.artwork, class: "d-block w-100 shadow p-3 mb-3 bg-white rounded" %>
        </button>

        <!-- Modal -->              
        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Season<%= paintwork.season %>Episode<%= paintwork.episode %></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              </div>
              <div class="modal-body">
                <%= image_tag paintwork.artwork, class: "d-block w-100 shadow p-3 mb-3 bg-white rounded" %>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  <% end %>
<% end %>

当前的输出是每张图片的显示方式都不同，但是当我点击其中任何一张时，它总是作为第一张图片出现，并且上面写着“季节”和“剧集”，它们也总是相同的。我希望我点击的图片是出现的图片

Answer 1

原因是模态在循环内部，但它触发的 id 总是会抓住第一个。将 modal 上的 id 更改为特定于每个实例，并使其在按钮上触发的 id 匹配。

 <% @painting.each do |paintwork| %>
      <% if paintwork.profile_id.to_i == @profile.id.to_i %>
      <div class="col-md-3">
        <% if paintwork.artwork.attached? %>
                        <!-- Button trigger modal -->
          <button type="button" class="btn popart" data-toggle="modal" data-target="#exampleModalCenter-<%= paintwork.id %>">
            <%= image_tag paintwork.artwork, class: "d-block w-100 shadow p-3 mb-3 bg-white rounded" %>
          </button>

          <!-- Modal -->

          <div class="modal fade" id="exampleModalCenter-<%= paintwork.id %>" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLongTitle">Season<%= paintwork.season %>Episode<%= paintwork.episode %></h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                  <%= image_tag paintwork.artwork, class: "d-block w-100 shadow p-3 mb-3 bg-white rounded" %>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>