繰り返し処理の中でモーダルウィンドウを実装すると、モーダル全てに同じ画像が表示されてしまうエラー
発生したエラー
繰り返し処理の中でモーダルウィンドウを実装すると、モーダル全て同じ画像が表示されてしまう
開発環境
・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名だけ書いてしまってるので、繰り返し処理をすると全てのモーダルウインドウで１番目の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 %>
以上となります。
Author And Source
この問題について(繰り返し処理の中でモーダルウィンドウを実装すると、モーダル全てに同じ画像が表示されてしまうエラー), 我々は、より多くの情報をここで見つけました https://qiita.com/Ksk2020/items/9a8e124158199228a981著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .