質問編集履歴
2
対象のhtmlコードを部分から全体に変更いたしました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -156,25 +156,64 @@
|
|
|
156
156
|
|
|
157
157
|
対象のhtmlコードを追記します。
|
|
158
158
|
|
|
159
|
-
```
|
|
159
|
+
```_form.html.erb
|
|
160
|
-
|
|
160
|
+
<%= form_with model: @learn, id: 'new_learn', local: true do |f| %>
|
|
161
|
-
|
|
162
|
-
|
|
161
|
+
<div class="learn-form-group">
|
|
162
|
+
<div class="weight-bold-text">
|
|
163
|
+
タイトル
|
|
164
|
+
<span class="indispensable">必須</span>
|
|
165
|
+
</div>
|
|
166
|
+
<%= f.text_area :title, class:"learns-title", id:"learn-title", placeholder:"40文字まで", maxlength:"40" %>
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
<div class="learn-form-group">
|
|
170
|
+
<div class="weight-bold-text">
|
|
171
|
+
説明文
|
|
172
|
+
</div>
|
|
173
|
+
<%= f.text_area :description, class:"learns-description", id:"learn-info", placeholder:"1000文字まで", maxlength:"1000" %>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
<div class="learn-form-group">
|
|
177
|
+
<div class="weight-bold-text">
|
|
178
|
+
教科
|
|
179
|
+
<span class="indispensable">必須</span>
|
|
180
|
+
</div>
|
|
181
|
+
<%= f.collection_select(:subject_id, Subject.all, :id, :name, {}, {class:"select-box", id:"learn-subject"}) %>
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
<div class="learn-form-group">
|
|
185
|
+
<div class="weight-bold-text">
|
|
186
|
+
学習時間
|
|
187
|
+
</div>
|
|
163
|
-
|
|
188
|
+
<div class="learns-time">
|
|
164
|
-
|
|
189
|
+
<div class="time-form">
|
|
190
|
+
<%= f.text_field :study_hour, class:"learn-time", id:"study-hours" %><span>時間</span>
|
|
165
191
|
</div>
|
|
192
|
+
<div class="time-form">
|
|
193
|
+
<%= f.text_field :study_minutes, class:"learn-time", id:"study-minutes" %><span>分</span>
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
<div class="learn-form-group">
|
|
199
|
+
<div class="image-title">
|
|
200
|
+
画像
|
|
201
|
+
</div>
|
|
166
|
-
|
|
202
|
+
<label class="form-image">
|
|
167
|
-
|
|
203
|
+
<div id="previews"></div>
|
|
168
|
-
|
|
204
|
+
<div class="click-upload">
|
|
169
|
-
|
|
205
|
+
<p>
|
|
170
|
-
|
|
206
|
+
画像を選択する
|
|
171
|
-
|
|
207
|
+
</p>
|
|
172
|
-
|
|
208
|
+
<%= f.file_field :image, name: 'learn[images][]', class: "hidden", data: {index: 0} %>
|
|
173
|
-
|
|
209
|
+
</div>
|
|
174
|
-
|
|
210
|
+
</label>
|
|
175
|
-
|
|
211
|
+
</div>
|
|
212
|
+
|
|
176
|
-
|
|
213
|
+
<div class="learn-post-btn">
|
|
214
|
+
<%= f.submit "記録する", class:"post-btn" %>
|
|
215
|
+
</div>
|
|
177
|
-
|
|
216
|
+
<% end %>
|
|
178
217
|
```
|
|
179
218
|
|
|
180
219
|
|
1
問題発現までの流れと補足情報に該当のhtmlコードを追記しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -62,6 +62,13 @@
|
|
|
62
62
|
```
|
|
63
63
|
|
|
64
64
|
上記の6行目のように画像にも「data-index」を付与しています。
|
|
65
|
+
|
|
66
|
+
### 問題発現までの流れ
|
|
67
|
+
|
|
68
|
+
新規投稿する際に、今までの機能では画像を選択したところでプレビュー画像が現れない仕様でした。
|
|
69
|
+
そこで、まずは画像一枚のみ現れるように新しくpreview.jsを作り、そこにコードを記述しました。
|
|
70
|
+
その後に複数画像を投稿できるようにまずは一枚目の画像を選択すると２枚目専用の画像選択ボタンが現れるようにしました。次に２枚目の画像が選択されると、その画像が現れるようにしました。その時に、現れた画像に番号をつけ、画像の変更・削除に対応するようにしましたが、ブラウザの検証で見てみると、それぞれの画像にはdata-index（※画像に番号をつけるための変数）が振り分けられているのに、全ての画像の番号が0（最初の番号）になっている状態になりました。
|
|
71
|
+
ちなみに画像選択ボタンの方はそれぞれしっかりと0番から順番に振り分けられていましたので、そこは問題ありませんでした。
|
|
65
72
|
|
|
66
73
|
### 試したこと
|
|
67
74
|
|
|
@@ -147,5 +154,29 @@
|
|
|
147
154
|
|
|
148
155
|
```
|
|
149
156
|
|
|
157
|
+
対象のhtmlコードを追記します。
|
|
158
|
+
|
|
159
|
+
```new.html.erb
|
|
160
|
+
（省略）
|
|
161
|
+
|
|
162
|
+
<div class="learn-form-group">
|
|
163
|
+
<div class="image-title">
|
|
164
|
+
画像
|
|
165
|
+
</div>
|
|
166
|
+
<label class="form-image">
|
|
167
|
+
<div id="previews"></div>
|
|
168
|
+
<div class="click-upload">
|
|
169
|
+
<p>
|
|
170
|
+
画像を選択する
|
|
171
|
+
</p>
|
|
172
|
+
<%= f.file_field :image, name: 'learn[images][]', class: "hidden", data: {index: 0} %>
|
|
173
|
+
</div>
|
|
174
|
+
</label>
|
|
175
|
+
</div>
|
|
176
|
+
|
|
177
|
+
（省略）
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
|
|
150
181
|
恐縮ですが、ご回答していただける方お待ちしております。
|
|
151
182
|
|