teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

クリック部分の記述を追加しました。

2020/06/25 08:30

投稿

popomarudasi
popomarudasi

スコア20

title CHANGED
File without changes
body CHANGED
@@ -19,4 +19,35 @@
19
19
  </div>
20
20
 
21
21
    略
22
+ ```
23
+
24
+ index.html.erb のクリックする部分。↓
25
+ ```rails
26
+ <% @products.each do |product| %>
27
+
28
+ 上記モーダル記述
29
+     略
30
+
31
+ <div class="product-image">
32
+ <%= image_tag product.image_name.thumb.url %>
33
+ </div>   
34
+ ```
35
+
36
+ ↑のclass="product-image"のdivをクリックしてモーダルを表示させています。
37
+
38
+ jQuery 記述↓
39
+ ```jQuery
40
+ $(document).on('turbolinks:load', function() {
41
+
42
+
43
+ $('.product-image').click(
44
+ function(){
45
+ $('.img-modal-wrapper').fadeIn();
46
+ });
47
+ $('.close-modal').click(function(){
48
+ $('.img-modal-wrapper').fadeOut();
49
+ });
50
+
51
+
52
+ });
22
53
  ```

1

タイトルがわかりにくかったので変更しました。

2020/06/25 08:30

投稿

popomarudasi
popomarudasi

スコア20

title CHANGED
@@ -1,1 +1,1 @@
1
- Rails each文モーダルをつけたい
1
+ Rails ECサイトにて each文で全商品のモーダルがでてしまう
body CHANGED
File without changes