Question

我正在索引页面上浏览数据库，以显示某人上传的所有图片。从那里开始，我想如果您可以单击任何您喜欢的东西，那将会很不错，并且它会弹出较大的窗口，以便您仔细查看。我在引导程序中找到了执行此操作的代码。唯一的问题是-每个图片都不相同，但是当我单击它们时，它们都会弹出来成为同一张图片。

我尝试将puts语句放入代码流中，并且它肯定会意识到它一直在循环，直到我经过它被注释为“ Modal”的地方才开始中断。我不知道为什么

<% @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总是会抓住第一个。将模式上的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>

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

1 个答案: