Q&A
（質問文は編集できます）hamlを出力したHTMLを提示されることをお勧めします。
お世話になっております。
jQueryを使ってインスタンス変数であるchild.idを取得したいのですが、上手くいきません。
現状をお伝えします。
haml
1.namecard 2 .card{ type: 'button' } 3 %input{ class: 'child_id', type: 'hidden', value: child.id } 4 = child.id
viewはこのように表示されています。
左上にあるのはchild.idとなり、この番号を取得したいです。
この枠内をクリックすることによって下記のjQueryが発火します。
child.js
js
1$('.card').on('click', function(){ 2 console.log($('.child_id').val()); 3});
こちらでchild.idを取得することはできているのですが、本来、各カードに対応したidが取得できると想定したのですが、
どこを押しても1しか取得することができません。
対応した、child.idを取得したいです。
jsを読み込ませるタイミングが悪いのかと思い、いろんなファイルで読み込ませてみたのですが、変わらず１だけでした。。。
なお、このhamlファイルは上層のhtmlにて
haml
1= render partial: 'trusts/child', collection: children
で読み込んでおります。
ご回答よろしくおねがいいたします。
ご参考
出力するファイル全てです。
haml
1.row 2 .col-7 3 = render partial: 'trusts/child', collection: children 4 5= javascript_include_tag 'child.js' 6
↓
haml
1= render partial: 'trusts/namecard', locals: { child: child }
↓
(当該ファイル)
haml
1.namecard 2 .card{ type: 'button' } 3 %input{ class: 'child_id', type: 'hidden', value: child.id } 4 = child.id 5 .card-body 6 .card-title 7 %ul 8 %li.card-column 名前 9 %li.card-column 生年月日 10 %li.card-column 年齢
html
1 2<!DOCTYPE html> 3<html> 4~ 5<body> 6 7~ 8 9<div class='namecard'> 10<div class='card' type='button'> 11<input class='child_id' type='hidden' value='1'> 121 13</input> 14<div class='card-body'> 15<div class='card-title'></div> 16<ul> 17<li class='card-column'>名前</li> 18<li class='card-content'>開 発太郎</li> 19<li class='card-column'>生年月日</li> 20<li class='card-content'>1987年4月21日</li> 21<li class='card-column'>年齢</li> 22<li class='card-content'>34</li> 23</ul> 24</div> 25</div> 26</div> 27 28<div class='namecard'> 29<div class='card' type='button'> 30<input class='child' type='hidden' value='2'> 312 32</input> 33<div class='card-body'> 34<div class='card-title'></div> 35<ul> 36<li class='card-column'>名前</li> 37<li class='card-content'>開 次郎</li> 38<li class='card-column'>生年月日</li> 39<li class='card-content'>-</li> 40<li class='card-column'>年齢</li> 41<li class='card-content'>-</li> 42</ul> 43</div> 44</div> 45</div> 46 47<div class='namecard'> 48<div class='card' type='button'> 49<input class='child_id' type='hidden' value='3'> 503 51</input> 52<div class='card-body'> 53<div class='card-title'></div> 54<ul> 55<li class='card-column'>名前</li> 56<li class='card-content'>ほげ へご</li> 57<li class='card-column'>生年月日</li> 58<li class='card-content'>1990年12月22日</li> 59<li class='card-column'>年齢</li> 60<li class='card-content'>30</li> 61</ul> 62</div> 63</div> 64</div> 65~
ありがとうございます。更新させていただきました。
おそらくkei344さんの意図した内容になっていません。
ブラウザに表示したときに「ソースを表示」で得られる「HTML」を提示してください。要はコンパイル後のコードです。
申し訳ございません。
再度アップさせていただきました。
回答1件
0
ベストアンサー
JavaScript
1$('.card').on('click', function(){ 2 console.log($('.child_id',this).val()); 3 // or console.log($(this).find('.child_id',).val()); 4}); 5```**動くサンプル：**[https://jsfiddle.net/a4bdp68L/](https://jsfiddle.net/a4bdp68L/)
投稿2021/05/01 14:06
総合スコア69458
ありがとうございます！取得できました。
僕のコードだと一番先頭の.cardを参照してしまっていたから1しか抽出できなかったのだと想定しています。
thisがクリックしたクラスそのものを指していてそこからidを抽出するということでしょうか？
$('.child_id').val() ･･･ .child_idの付いた要素全部の中の最初のvalue
$('.child_id',this).val() ･･･ this（クリックされた要素）の中の .child_idの付いた要素のvalue
ご丁寧にご説明いただきありがとうございます！
あなたの回答
tips
プレビュー
