現在HTML(),JavaScript(jQuery)を使ってアプリ開発をしています。
質問があるのですが、
結論から言うと
クリックしたboxに対応するboxを取得するにはどうしたらいいでしょうか?
抽象的なので具体例を挙げて説明すると、
以下のようなコードがあります。
html
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 6<style> 7.box2{ 8 width: 150px; 9 height: 30px; 10 background-color: pink; 11 border: solid 1px pink; 12 margin: 5px; 13} 14</style> 15</head> 16<body> 17<div class="container1" style="display:none"> 18 <ul class="backBox1"> 19 <li class="box">a1</li> 20 <li class="box">a2</li> 21 <li class="box">a3</li> 22 <li class="box">a4</li> 23 <li class="box">a5</li> 24 <li class="box">a6</li> 25 </ul> 26</div> 27<div class="container2"> 28 <ul class="backBox2"> 29 <li class="box2">b2</li> 30 <li class="box2">b3</li> 31 <li class="box2">b5</li> 32 </ul> 33</div> 34<script> 35$('.box2').on('click',function(){ 36 37 //対応するaのboxを取得したい 38 39}); 40</script> 41</body> 42</html> 43
やりたいこととしては、bのboxをクリックしたしたときに
aのboxで番号が対応するもののHTMLコンテンツを取得したい。
というものです。
HTMLコンテンツを取得するにはhtml()やouterHtmlを使えばいいというのは知っています。
クラスやidを振っても構いません。
どうやるのがベターなのかな。というところで迷っています。
それぞれの番号と同じidをそれぞれのliタグに振って、それを使ってクリックしたbのboxに対応するaのboxを取得するとかでしょうか?
なにかよくやる方法やお手頃なやり方などありましたらアドバイス頂ければなと思います。
よろしくお願いします。
追記
私の思いつく限りでは以下のような方法になります。
もし他にもいい方法があれば教えていただきたいです。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 6<style> 7 8.box2{ 9 width: 150px; 10 height: 30px; 11 background-color: pink; 12 border: solid 1px pink; 13 margin: 5px; 14} 15 16</style> 17</head> 18<body> 19<div class="containerA" style="display:none"> 20 <ul class="backBox"> 21 <li class="box">a1<input type="hidden" value="1" class="boxId"></li> 22 <li class="box">a2<input type="hidden" value="2" class="boxId"></li> 23 <li class="box">a3<input type="hidden" value="3" class="boxId"></li> 24 <li class="box">a4<input type="hidden" value="4" class="boxId"></li> 25 <li class="box">a5<input type="hidden" value="5" class="boxId"></li> 26 <li class="box">a6<input type="hidden" value="6" class="boxId"></li> 27 </ul> 28</div> 29<div class="containerB"> 30 <ul class="backBox"> 31 <li class="box2">b2<input type="hidden" value="2" class="boxId"></li> 32 <li class="box2">b3<input type="hidden" value="3" class="boxId"></li> 33 <li class="box2">b5<input type="hidden" value="5" class="boxId"></li> 34 </ul> 35</div> 36<script> 37$('.box2').on('click',function(){ 38 39//対応するaのboxを取得したい 40//クリックした要素の値を取得する 41var boxVal = $(this).find('.boxId').val(); 42 43//それに対応するaのboxのhtmlコンテンツを取得する 44var result = ('.containerA').find(".boxId[value="+boxVal+"]"); 45 46 47}); 48</script> 49</body> 50</html> 51
回答1件
あなたの回答
tips
プレビュー