現在HTML(),JavaScript(jQuery)を使ってアプリ開発をしています。
質問があるのですが、
結論から言うと
クリックしたboxに対応するboxを取得するにはどうしたらいいでしょうか?
抽象的なので具体例を挙げて説明すると、
以下のようなコードがあります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
.box2{
width: 150px;
height: 30px;
background-color: pink;
border: solid 1px pink;
margin: 5px;
}
</style>
</head>
<body>
<div class="container1" style="display:none">
<ul class="backBox1">
<li class="box">a1</li>
<li class="box">a2</li>
<li class="box">a3</li>
<li class="box">a4</li>
<li class="box">a5</li>
<li class="box">a6</li>
</ul>
</div>
<div class="container2">
<ul class="backBox2">
<li class="box2">b2</li>
<li class="box2">b3</li>
<li class="box2">b5</li>
</ul>
</div>
<script>
$('.box2').on('click',function(){
//対応するaのboxを取得したい
});
</script>
</body>
</html>
やりたいこととしては、bのboxをクリックしたしたときに
aのboxで番号が対応するもののHTMLコンテンツを取得したい。
というものです。
HTMLコンテンツを取得するにはhtml()やouterHtmlを使えばいいというのは知っています。
クラスやidを振っても構いません。
どうやるのがベターなのかな。というところで迷っています。
それぞれの番号と同じidをそれぞれのliタグに振って、それを使ってクリックしたbのboxに対応するaのboxを取得するとかでしょうか?
なにかよくやる方法やお手頃なやり方などありましたらアドバイス頂ければなと思います。
よろしくお願いします。
追記
私の思いつく限りでは以下のような方法になります。
もし他にもいい方法があれば教えていただきたいです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
.box2{
width: 150px;
height: 30px;
background-color: pink;
border: solid 1px pink;
margin: 5px;
}
</style>
</head>
<body>
<div class="containerA" style="display:none">
<ul class="backBox">
<li class="box">a1<input type="hidden" value="1" class="boxId"></li>
<li class="box">a2<input type="hidden" value="2" class="boxId"></li>
<li class="box">a3<input type="hidden" value="3" class="boxId"></li>
<li class="box">a4<input type="hidden" value="4" class="boxId"></li>
<li class="box">a5<input type="hidden" value="5" class="boxId"></li>
<li class="box">a6<input type="hidden" value="6" class="boxId"></li>
</ul>
</div>
<div class="containerB">
<ul class="backBox">
<li class="box2">b2<input type="hidden" value="2" class="boxId"></li>
<li class="box2">b3<input type="hidden" value="3" class="boxId"></li>
<li class="box2">b5<input type="hidden" value="5" class="boxId"></li>
</ul>
</div>
<script>
$('.box2').on('click',function(){
//対応するaのboxを取得したい
//クリックした要素の値を取得する
var boxVal = $(this).find('.boxId').val();
//それに対応するaのboxのhtmlコンテンツを取得する
var result = ('.containerA').find(".boxId[value="+boxVal+"]");
});
</script>
</body>
</html>
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+2
click された要素を特定するいくつかの方法を挙げてみました。お好みで。カスタム属性 (data-xxx="yyy"
) が素直でしょうか。
あと、挿入する div を特定するのに '#content' + seq
と id で拾っていますが、こちらも name で引くとか、$('div.containerA>backBox').get(index)
で引くとか、いくつか方法があると思います。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
.box2{
width: 150px;
height: 30px;
background-color: pink;
border: solid 1px pink;
margin: 5px;
}
#area .box {
width: 500px;
display: table;
border: 2px solid slateblue;
margin: 1px;
}
#area .box .caption {
color: white;
background-color: slateblue;
display: table-cell;
width: 10%;
}
#area .box .content {
display: table-cell;
}
.box2 .ref {
display: none;
}
</style>
</head>
<body>
<div class="containerA" style="display:none">
<ul class="backBox">
<li class="box" id="content01">a1</li>
<li class="box" id="content02">a2</li>
<li class="box" id="content03">a3</li>
<li class="box" id="content04">a4</li>
<li class="box" id="content05">a5</li>
<li class="box" id="content06">a6</li>
</ul>
</div>
<div class="containerB">
<ul class="backBox">
<li class="box2" id="button02" name="button02" data-ref="02"><span class="ref">02</span>b2</li>
<li class="box2" id="button03" name="button03" data-ref="03"><span class="ref">03</span>b3</li>
<li class="box2" id="button05" name="button05" data-ref="05"><span class="ref">05</span>b5</li>
</ul>
</div>
<div id="area">
</div>
<script>
$(function() {
var insert = function(arg, caption, seq) {
if (arg.id) {
caption = 'id';
seq = arg.id.substr(6);
} else if (arg.name) {
caption = 'name';
seq = arg.name.substr(6);
} else if (arg.text) {
caption = 'text';
seq = '0' + arg.text.substr(3); // span タグなしなら substr(1)
} else if (arg.span) {
caption = 'span';
seq = arg.span;
} else if (arg.data1) {
caption = 'data1';
seq = '0' + arg.data1; // .data() は自動型変換が入るので注意
} else if (arg.data2) {
caption = 'data2';
seq = arg.data2;
}
if (seq) {
$('#area')
.append($('<div class="box">')
.append($('<div class="caption">').append(caption))
.append($('<div class="content">').append($('#content' + seq).text())))
;
}
};
$('.box2').on('click', function() {
insert( { id: $(this).attr('id') } );
insert( { name: $(this).attr('name') } );
insert( { text: $(this).text() } );
insert( { span: $(this).children('.ref').text() } );
insert( { data1: $(this).data('ref') } );
insert( { data2: $(this).attr('data-ref') } );
return false;
});
});
</script>
</body>
</html>
追記:プラグイン版
自分だと、これくらいの規模でもプラグイン化してしまうことが多いです。コードがまとまって見やすいから、というのと、多分に趣味的な問題で。
ここでは、できるだけ最初に必要な情報を求めておき、ボタンを押したときの動作が速くなるようにしてみました。まあ、ボタン押してから id で要素を引いてきて .text()
で中身を取ってきてもいっこうに構わないレスポンスタイムは出せると思いますけど。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
.contentArea {
display: none;
}
.buttonArea ul {
display: table;
background-color: pink;
border-radius: 10%;
padding: 2px;
}
.buttonArea ul li.button {
display: table-cell;
border-left: 1px solid white;
padding: 2px;
margin: 2px;
}
.buttonArea ul li.button:first-child {
border-left: none;
}
.displayArea {
width: 500px;
border: 2px solid gray;
}
.displayArea .box {
display: table;
border: 2px solid slateblue;
margin: 1px;
}
</style>
</head>
<body>
<div class="contentArea">
<ul>
<li id="content01">a1</li>
<li id="content02">a2</li>
<li id="content03">a3</li>
<li id="content04">a4</li>
<li id="content05">a5</li>
<li id="content06">a6</li>
</ul>
</div>
<div class="buttonArea"></div>
<div class="displayArea"></div>
<script>
$.fn.mybox = function(opts) {
var $mybox = $(this);
opts = $.extend({ buttons: [] }, opts );
var $buttonContainer = $('<ul>').appendTo($mybox.find('.buttonArea'));
var $displayArea = $mybox.find('.displayArea');
var buttons = $mybox.find('.contentArea li').map(function() {
var $content = $(this);
var content = $content.text();
var seq = $content.attr('id').substr(7);
var $button = $('<li class="button">b' + seq + '</li>')
.appendTo($buttonContainer)
.on('click', function() {
$displayArea.append($('<div class="box">').append(content));
return false;
})
;
if (opts.buttons.indexOf(seq) < 0) $button.hide();
return $button;
});
};
$(function() {
$('body').mybox( { buttons: ['02', '03', '05'] } );
});
</script>
</body>
</html>
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.33%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
k499778
2016/04/14 08:56
修正しました。