teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問jQueryで個別のidを読み込みことが出来ない

編集履歴

質問編集履歴

5

修正

2021/05/01 13:58

投稿

tarotarotarotar
tarotarotarotar

スコア41

test CHANGED
File without changes
test CHANGED
@@ -42,8 +42,6 @@
42
42
 
43
43
  console.log($('.child_id').val());
44
44
 
45
- showRelativeAjax();
46
-
47
45
  });
48
46
 
49
47
  ```

4

a

2021/05/01 13:58

投稿

tarotarotarotar
tarotarotarotar

スコア41

test CHANGED
File without changes
test CHANGED
@@ -34,6 +34,8 @@
34
34
 
35
35
  この枠内をクリックすることによって下記のjQueryが発火します。
36
36
 
37
+ `child.js`
38
+
37
39
  ```js
38
40
 
39
41
  $('.card').on('click', function(){
@@ -186,10 +188,44 @@
186
188
 
187
189
  <li class='card-content'>34</li>
188
190
 
191
+ </ul>
192
+
193
+ </div>
194
+
195
+ </div>
196
+
197
+ </div>
198
+
199
+
200
+
201
+ <div class='namecard'>
202
+
203
+ <div class='card' type='button'>
204
+
205
+ <input class='child' type='hidden' value='2'>
206
+
207
+ 2
208
+
209
+ </input>
210
+
211
+ <div class='card-body'>
212
+
213
+ <div class='card-title'></div>
214
+
215
+ <ul>
216
+
189
- <li class='card-column'>続柄</li>
217
+ <li class='card-column'>名前</li>
218
+
219
+ <li class='card-content'>開 次郎</li>
220
+
221
+ <li class='card-column'>生年月日</li>
190
222
 
191
223
  <li class='card-content'>-</li>
192
224
 
225
+ <li class='card-column'>年齢</li>
226
+
227
+ <li class='card-content'>-</li>
228
+
193
229
  </ul>
194
230
 
195
231
  </div>
@@ -204,9 +240,9 @@
204
240
 
205
241
  <div class='card' type='button'>
206
242
 
207
- <input class='child' type='hidden' value='2'>
243
+ <input class='child_id' type='hidden' value='3'>
208
-
244
+
209
- 2
245
+ 3
210
246
 
211
247
  </input>
212
248
 
@@ -218,19 +254,15 @@
218
254
 
219
255
  <li class='card-column'>名前</li>
220
256
 
221
- <li class='card-content'>開 次郎</li>
257
+ <li class='card-content'>ほげ へご</li>
222
258
 
223
259
  <li class='card-column'>生年月日</li>
224
260
 
225
- <li class='card-content'>-</li>
261
+ <li class='card-content'>1990年12月22日</li>
226
262
 
227
263
  <li class='card-column'>年齢</li>
228
264
 
229
- <li class='card-content'>-</li>
265
+ <li class='card-content'>30</li>
230
-
231
- <li class='card-column'>続柄</li>
232
-
233
- <li class='card-content'>-</li>
234
266
 
235
267
  </ul>
236
268
 
@@ -240,48 +272,6 @@
240
272
 
241
273
  </div>
242
274
 
243
-
244
-
245
- <div class='namecard'>
246
-
247
- <div class='card' type='button'>
248
-
249
- <input class='child_id' type='hidden' value='3'>
250
-
251
- 3
252
-
253
- </input>
254
-
255
- <div class='card-body'>
256
-
257
- <div class='card-title'></div>
258
-
259
- <ul>
260
-
261
- <li class='card-column'>名前</li>
262
-
263
- <li class='card-content'>ほげ へご</li>
264
-
265
- <li class='card-column'>生年月日</li>
266
-
267
- <li class='card-content'>1990年12月22日</li>
268
-
269
- <li class='card-column'>年齢</li>
270
-
271
- <li class='card-content'>30</li>
272
-
273
- <li class='card-column'>続柄</li>
274
-
275
- <li class='card-content'>-</li>
276
-
277
- </ul>
278
-
279
- </div>
280
-
281
- </div>
282
-
283
- </div>
284
-
285
275
  ~
286
276
 
287
277
  ```

3

修正

2021/05/01 13:57

投稿

tarotarotarotar
tarotarotarotar

スコア41

test CHANGED
File without changes
test CHANGED
@@ -137,3 +137,151 @@
137
137
  %li.card-column 年齢
138
138
 
139
139
  ```
140
+
141
+
142
+
143
+ ```html
144
+
145
+
146
+
147
+ <!DOCTYPE html>
148
+
149
+ <html>
150
+
151
+ ~
152
+
153
+ <body>
154
+
155
+
156
+
157
+ ~
158
+
159
+
160
+
161
+ <div class='namecard'>
162
+
163
+ <div class='card' type='button'>
164
+
165
+ <input class='child_id' type='hidden' value='1'>
166
+
167
+ 1
168
+
169
+ </input>
170
+
171
+ <div class='card-body'>
172
+
173
+ <div class='card-title'></div>
174
+
175
+ <ul>
176
+
177
+ <li class='card-column'>名前</li>
178
+
179
+ <li class='card-content'>開 発太郎</li>
180
+
181
+ <li class='card-column'>生年月日</li>
182
+
183
+ <li class='card-content'>1987年4月21日</li>
184
+
185
+ <li class='card-column'>年齢</li>
186
+
187
+ <li class='card-content'>34</li>
188
+
189
+ <li class='card-column'>続柄</li>
190
+
191
+ <li class='card-content'>-</li>
192
+
193
+ </ul>
194
+
195
+ </div>
196
+
197
+ </div>
198
+
199
+ </div>
200
+
201
+
202
+
203
+ <div class='namecard'>
204
+
205
+ <div class='card' type='button'>
206
+
207
+ <input class='child' type='hidden' value='2'>
208
+
209
+ 2
210
+
211
+ </input>
212
+
213
+ <div class='card-body'>
214
+
215
+ <div class='card-title'></div>
216
+
217
+ <ul>
218
+
219
+ <li class='card-column'>名前</li>
220
+
221
+ <li class='card-content'>開 次郎</li>
222
+
223
+ <li class='card-column'>生年月日</li>
224
+
225
+ <li class='card-content'>-</li>
226
+
227
+ <li class='card-column'>年齢</li>
228
+
229
+ <li class='card-content'>-</li>
230
+
231
+ <li class='card-column'>続柄</li>
232
+
233
+ <li class='card-content'>-</li>
234
+
235
+ </ul>
236
+
237
+ </div>
238
+
239
+ </div>
240
+
241
+ </div>
242
+
243
+
244
+
245
+ <div class='namecard'>
246
+
247
+ <div class='card' type='button'>
248
+
249
+ <input class='child_id' type='hidden' value='3'>
250
+
251
+ 3
252
+
253
+ </input>
254
+
255
+ <div class='card-body'>
256
+
257
+ <div class='card-title'></div>
258
+
259
+ <ul>
260
+
261
+ <li class='card-column'>名前</li>
262
+
263
+ <li class='card-content'>ほげ へご</li>
264
+
265
+ <li class='card-column'>生年月日</li>
266
+
267
+ <li class='card-content'>1990年12月22日</li>
268
+
269
+ <li class='card-column'>年齢</li>
270
+
271
+ <li class='card-content'>30</li>
272
+
273
+ <li class='card-column'>続柄</li>
274
+
275
+ <li class='card-content'>-</li>
276
+
277
+ </ul>
278
+
279
+ </div>
280
+
281
+ </div>
282
+
283
+ </div>
284
+
285
+ ~
286
+
287
+ ```

2

修正

2021/05/01 13:40

投稿

tarotarotarotar
tarotarotarotar

スコア41

test CHANGED
File without changes
test CHANGED
@@ -75,3 +75,65 @@
75
75
  で読み込んでおります。
76
76
 
77
77
  ご回答よろしくおねがいいたします。
78
+
79
+
80
+
81
+ ご参考
82
+
83
+
84
+
85
+ 出力するファイル全てです。
86
+
87
+
88
+
89
+ ```haml
90
+
91
+ .row
92
+
93
+ .col-7
94
+
95
+ = render partial: 'trusts/child', collection: children
96
+
97
+
98
+
99
+ = javascript_include_tag 'child.js'
100
+
101
+
102
+
103
+ ```
104
+
105
+ ↓
106
+
107
+ ```haml
108
+
109
+ = render partial: 'trusts/namecard', locals: { child: child }
110
+
111
+ ```
112
+
113
+ ↓
114
+
115
+ (当該ファイル)
116
+
117
+ ```haml
118
+
119
+ .namecard
120
+
121
+ .card{ type: 'button' }
122
+
123
+ %input{ class: 'child_id', type: 'hidden', value: child.id }
124
+
125
+ = child.id
126
+
127
+ .card-body
128
+
129
+ .card-title
130
+
131
+ %ul
132
+
133
+ %li.card-column 名前
134
+
135
+ %li.card-column 生年月日
136
+
137
+ %li.card-column 年齢
138
+
139
+ ```

1

修正

2021/05/01 10:39

投稿

tarotarotarotar
tarotarotarotar

スコア41

test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
  ![イメージ説明](0f0e4f4b8bb32a7d13d806ed8ece37ae.png)
32
32
 
33
- 左上にあるのはchild.idとなります。
33
+ 左上にあるのはchild.idとなり、この番号を取得したいです。
34
34
 
35
35
  この枠内をクリックすることによって下記のjQueryが発火します。
36
36