#発生したエラー
繰り返し処理の中でモーダルウィンドウを実装すると、モーダル全て同じ画像が表示されてしまう
#開発環境
・Ruby 2.5.7
・Rails 5.2.4.4
・macOS Catalina 10.15.7
・refile
・Bootstrap3
#前提
・refileで画像投稿機能実装済み
・Bootstrap導入済み
・route.rbでのルーティング、モデル間のアソシエーションは実装済み
・親モデルであるPersonモデルと画像投稿用のcreationモデルは1:Nの関係
・下記サイトを参考にjem無しで画像拡大機能を実装したく、モーダルウインドウを実装しています。
参考サイト
サイト名:Pilgrim(ピルグリム)
著者名:ねこま様
記事名:[Bootstrap]クリックした画像を浮かび上がらせる ー モーダルウィンドウ
URL:http://pilgrim-guild.com/modal-window-on-bootstrap/
<% @person.creations.each do |creation| %>
<%= attachment_image_tag creation, :image, :fill, 250, 100 %>
<!-- モーダルのトリガーボタン -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#creationModal">拡大する
</button>
#省略
<!-- モーダルウィンドウ -->
<div class="modal fade" id="creationModal" tabindex="-1" role="dialog" aria-labelledby="creationModalLabel">
#省略
</div>
<% end %>
(※Personは親モデル。PersonのshowページでCreationモデルの投稿機能を実装しています)
#エラー原因と解消方法
注目するのは"modal fade"クラスの"creationModal"IDです。
ID名だけ書いてしまってるので、繰り返し処理をすると全てのモーダルウインドウで1番目のIDが表示されてしまっています。固有IDを追加が必要です。
そのため下記の様に、モーダルのトリガー部分とモーダルウィンドウのid部分にそれぞれ<%= creation.id %>を足してあげると解消しました。
<% @person.creations.each do |creation| %>
<%= attachment_image_tag creation, :image, :fill, 250, 100 %>
<!-- モーダルのトリガーボタン -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#creationModal<%= creation.id %>">拡大する
</button>
#省略
<!-- モーダルウィンドウ -->
<div class="modal fade" id="creationModal<%= creation.id %>" tabindex="-1" role="dialog" aria-labelledby="creationModalLabel">
#省略
</div>
<% end %>
以上となります。