Q&A
修正しました。
現在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件
0
ベストアンサー
click された要素を特定するいくつかの方法を挙げてみました。お好みで。カスタム属性 (data-xxx="yyy") が素直でしょうか。
あと、挿入する div を特定するのに '#content' + seq と id で拾っていますが、こちらも name で引くとか、$('div.containerA>backBox').get(index) で引くとか、いくつか方法があると思います。
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#area .box { 16 width: 500px; 17 display: table; 18 border: 2px solid slateblue; 19 margin: 1px; 20} 21#area .box .caption { 22 color: white; 23 background-color: slateblue; 24 display: table-cell; 25 width: 10%; 26} 27#area .box .content { 28 display: table-cell; 29} 30.box2 .ref { 31 display: none; 32} 33</style> 34</head> 35<body> 36<div class="containerA" style="display:none"> 37 <ul class="backBox"> 38 <li class="box" id="content01">a1</li> 39 <li class="box" id="content02">a2</li> 40 <li class="box" id="content03">a3</li> 41 <li class="box" id="content04">a4</li> 42 <li class="box" id="content05">a5</li> 43 <li class="box" id="content06">a6</li> 44 </ul> 45</div> 46<div class="containerB"> 47 <ul class="backBox"> 48 <li class="box2" id="button02" name="button02" data-ref="02"><span class="ref">02</span>b2</li> 49 <li class="box2" id="button03" name="button03" data-ref="03"><span class="ref">03</span>b3</li> 50 <li class="box2" id="button05" name="button05" data-ref="05"><span class="ref">05</span>b5</li> 51 </ul> 52</div> 53<div id="area"> 54</div> 55<script> 56$(function() { 57 var insert = function(arg, caption, seq) { 58 if (arg.id) { 59 caption = 'id'; 60 seq = arg.id.substr(6); 61 } else if (arg.name) { 62 caption = 'name'; 63 seq = arg.name.substr(6); 64 } else if (arg.text) { 65 caption = 'text'; 66 seq = '0' + arg.text.substr(3); // span タグなしなら substr(1) 67 } else if (arg.span) { 68 caption = 'span'; 69 seq = arg.span; 70 } else if (arg.data1) { 71 caption = 'data1'; 72 seq = '0' + arg.data1; // .data() は自動型変換が入るので注意 73 } else if (arg.data2) { 74 caption = 'data2'; 75 seq = arg.data2; 76 } 77 if (seq) { 78 $('#area') 79 .append($('<div class="box">') 80 .append($('<div class="caption">').append(caption)) 81 .append($('<div class="content">').append($('#content' + seq).text()))) 82 ; 83 } 84 }; 85 $('.box2').on('click', function() { 86 insert( { id: $(this).attr('id') } ); 87 insert( { name: $(this).attr('name') } ); 88 insert( { text: $(this).text() } ); 89 insert( { span: $(this).children('.ref').text() } ); 90 insert( { data1: $(this).data('ref') } ); 91 insert( { data2: $(this).attr('data-ref') } ); 92 return false; 93 }); 94}); 95</script> 96</body> 97</html>
追記：プラグイン版
自分だと、これくらいの規模でもプラグイン化してしまうことが多いです。コードがまとまって見やすいから、というのと、多分に趣味的な問題で。
ここでは、できるだけ最初に必要な情報を求めておき、ボタンを押したときの動作が速くなるようにしてみました。まあ、ボタン押してから id で要素を引いてきて .text() で中身を取ってきてもいっこうに構わないレスポンスタイムは出せると思いますけど。
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.contentArea { 8 display: none; 9} 10 11.buttonArea ul { 12 display: table; 13 background-color: pink; 14 border-radius: 10%; 15 padding: 2px; 16} 17.buttonArea ul li.button { 18 display: table-cell; 19 border-left: 1px solid white; 20 padding: 2px; 21 margin: 2px; 22} 23.buttonArea ul li.button:first-child { 24 border-left: none; 25} 26 27.displayArea { 28 width: 500px; 29 border: 2px solid gray; 30} 31.displayArea .box { 32 display: table; 33 border: 2px solid slateblue; 34 margin: 1px; 35} 36</style> 37</head> 38<body> 39<div class="contentArea"> 40 <ul> 41 <li id="content01">a1</li> 42 <li id="content02">a2</li> 43 <li id="content03">a3</li> 44 <li id="content04">a4</li> 45 <li id="content05">a5</li> 46 <li id="content06">a6</li> 47 </ul> 48</div> 49<div class="buttonArea"></div> 50<div class="displayArea"></div> 51<script> 52$.fn.mybox = function(opts) { 53 var $mybox = $(this); 54 opts = $.extend({ buttons: [] }, opts ); 55 var $buttonContainer = $('<ul>').appendTo($mybox.find('.buttonArea')); 56 var $displayArea = $mybox.find('.displayArea'); 57 var buttons = $mybox.find('.contentArea li').map(function() { 58 var $content = $(this); 59 var content = $content.text(); 60 var seq = $content.attr('id').substr(7); 61 var $button = $('<li class="button">b' + seq + '</li>') 62 .appendTo($buttonContainer) 63 .on('click', function() { 64 $displayArea.append($('<div class="box">').append(content)); 65 return false; 66 }) 67 ; 68 if (opts.buttons.indexOf(seq) < 0) $button.hide(); 69 return $button; 70 }); 71}; 72$(function() { 73 $('body').mybox( { buttons: ['02', '03', '05'] } ); 74}); 75</script> 76</body> 77</html>
投稿2016/04/14 21:00
編集2016/04/15 00:11
総合スコア2468
回答ありがとうございます。
試してみてできました。
具体的なコードまで書いてくださりありがとうございました。
ああ、自分ならこうするかなあ、というプラグイン版も追記しておきました。
試す前にベストアンサーを付けるのは早くないですか。別にいいですけど。
ここまで丁寧に回答してくださったので、たとえそれが多少間違いがあったとしても
大いなる情報提供してくださっている感謝の気持ちを込めてBAを試す前につけました。私自身満足する回答をいただけたので。
今回の場合、やり方はどうであれ、自分でもやりたいことは実現できていたので、他のやり方が知りたいという情報提供ベースの質問であったというのもあります。
もしそれが不愉快に思われるならunauさんにはこれからそういう風にしないようにします。
いえ、不愉快というのはまったくないです。余計なこと言って済みません。
あなたの回答
tips
プレビュー
