jQueryによる表示、非表示切り替え
パーマリンク | 2008年06月30日 20:28
今さらながらjQueryをお勉強。日本語のリファレンスも充分すぎるくらい充実してますんで、勉強しやすいですねよく使いそうなDivの表示、非表示切り替えをjQueryでやると・・・
jQueryによる表示、非表示サンプル
-----------------------------------------------------
Javascript
-----------------------------------------------------
$(function(){
// id="jQuerySample" 内のdivを非表示
$('#jQuerySample').css('display', 'none');
// id="jQuerySample"内のi番目のh5がクリックされた時、
// i番目のdivの表示、非表示切り替え
$('#jQuerySample').each(function(i){
$(this).click(function(){
$('#jQuerySample').eq(i).toggle();
});
});
});
-----------------------------------------------------
HTML
-----------------------------------------------------
<div id="jQuerySample">
<h5>jQueryサンプル1</h5>
<div>
<p>これはjQueryのサンプル1です。</p>
</div>
<h5>jQueryサンプル2</h5>
<div>
<p>これはjQueryのサンプル2です。</p>
</div>
<h5>jQueryサンプル3</h5>
<div>
<p>これはjQueryのサンプル3です。</p>
</div>
</div>
実行結果
jQueryサンプル1
これはjQueryのサンプル1です。
jQueryサンプル2
これはjQueryのサンプル2です。
jQueryサンプル3
これはjQueryのサンプル3です。
たったこれだけ。自分の場合jQuery使わないと下記のようにわけわからんことになってしまいました。もう吐きそうです。
jQueryを利用しない表示、非表示サンプル
onload = function() {
obj = document.getElementById("jQuerySample");
h5 = getEreaObj(obj,"h5");
div = getEreaObj(obj, "div");
for (i=0; i<h5.length; i++) {
div[i].style.display = "none";
showhide(h5[i], i);
}
}
function getEreaObj(obj, tag){
objs = obj.getElementsByTagName(tag);
return objs;
}
function showhide(obj, num){
myFunc = function(){
if(div[num].style.display == "none"){
div[num].style.display = "block";
}else{
div[num].style.display = "none";
}
}
obj.onclick = myFunc;
}
表示、非表示の切り替えでもこんな面倒です。さらにdivの中にdivが入ってる入れ子の状態の場合、 通常もっと厄介になりますが、jQuery利用すれば選択部分を変更するだけです。
jQueryを利用した子要素のみの表示、非表示サンプル
-----------------------------------------------------
Javascript
-----------------------------------------------------
$(function(){
// id="jQuerySample2" を親要素に持つdivを非表示
$('#jQuerySample2 > div').css('display', 'none');
// id="jQuerySample2"を親要素に持つi番目のh5が
// クリックされた時、i番目のdivの表示、非表示切り替え
$('#jQuerySample2 > h5').each(function(i){
$(this).click(function(){
$('#jQuerySample2 > div').eq(i).toggle();
});
});
});
-----------------------------------------------------
HTML
-----------------------------------------------------
<div id="jQuerySample">
<h5>jQueryサンプル1</h5>
<div>
<p>これはjQueryのサンプル1です。</p>
<div>
<p>これはjQueryのサンプル1の中のdiv内です。</p>
</div>
</div>
<h5>jQueryサンプル2</h5>
<div>
<p>これはjQueryのサンプル2です。</p>
</div>
<h5>jQueryサンプル3</h5>
<div>
<p>これはjQueryのサンプル3です。</p>
<div>
<p>これはjQueryのサンプル3の中のdiv内です。</p>
</div>
</div>
</div>
実行結果
jQueryサンプル1
これはjQueryのサンプル1です。
これはjQueryのサンプル1の中のdiv内です。
jQueryサンプル2
これはjQueryのサンプル2です。
jQueryサンプル3
これはjQueryのサンプル3です。
これはjQueryのサンプル3の中のdiv内です。
実際書き比べてみると便利さがよくわかります・・・
jQueryによる表示、非表示切り替えタグ:
トラックバック
- http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/230
最新更新ページ
- 2008/09/08sprintf()メモ
- 2008/09/05一定時間でsession終了メモ
- 2008/08/203ds MAX プラグイン Greeble
- 2008/08/13RSS 3Dデータ
- 2008/07/09PHP ファイルのオープンと読み込み
