Rails ECサイトにて each文で全商品のモーダルがでてしまう。

jQueryを用いてRailsのECサイトに画像拡大のモーダルをつくっています。
indexページで商品一覧から画像をクリックした際その商品の画像を拡大表示することを意図していました。
しかし、モーダルは全商品の画像がでてしまい、その商品だけモーダルを出すことができません。
どう記述すればクリックした商品の画像モーダルのみを表示することができるでしょうか。

index.html.erb　のモーダル部分です。　全商品のモーダルがでてしまいます。↓

rails
1    <% @products.each do |product| %>
2
3    <div class="img-modal-wrapper">
4      <div class="modal">
5        <div class="close-modal">
6          <i class="fa fa-remove" aria-hidden="true"></i>
7        </div>
8        <div>
9          <%= image_tag product.image_name.thumb.url %>
10        </div>
11      </div>
12    </div>
13
14　　略

index.html.erb のクリックする部分。↓

rails
1     <% @products.each do |product| %>
2
3      上記モーダル記述
4　　　　略
5
6      <div class="product-image">
7        <%= image_tag product.image_name.thumb.url %>
8      </div>

↑のclass="product-image"のdivをクリックしてモーダルを表示させています。

jQuery　記述↓

$(document).on('turbolinks:load', function() {


  $('.product-image').click(
  function(){
    $('.img-modal-wrapper').fadeIn();
  });
  $('.close-modal').click(function(){
    $('.img-modal-wrapper').fadeOut();
  });


});

asm

2020/06/25 08:24

クリックする側はどんな感じなのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

対象をidで指定してやるとよいかと思います。

js
1$(document).on('turbolinks:load', function() {
2
3
4  $('.product-image').click(
5  function(){
6    $($(this).data('target')).fadeIn();
7  });
8  $('.close-modal').click(function(){
9    $('.img-modal-wrapper').fadeOut();
10  });
11
12
13});

erb
1    <div class="img-modal-wrapper" id="modal_<%= product.id %>">
2...
3      <div class="product-image" data-target="#modal_<%= product.id %>">
4        <%= image_tag product.image_name.thumb.url %>
5      </div>