Solarized
HOME > WEBプログラム覚書 > jQueryによる表示、非表示切り替え
jQueryによる表示、非表示切り替え
今さらながらjQueryをお勉強。日本語のリファレンスも充分すぎるくらい充実してますんで、勉強しやすいですねよく使いそうなDivの表示、非表示切り替えをjQueryでやると・・・
jQueryによる表示、非表示サンプル
Javascript
- $(function(){
-
- $("#jQuerySample").css("display", "none");
-
-
-
- $("#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サンプル2
jQueryサンプル3
たったこれだけ。自分の場合jQuery使わないと下記のようにわけわからんことになってしまいました。もう吐きそうです。
jQueryを利用しない表示、非表示サンプル
Javascript
- 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(){
-
- $("#jQuerySample2 > div").css("display", "none");
-
-
-
- $("#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サンプル3
これはjQueryのサンプル3です。
これはjQueryのサンプル3の中のdiv内です。
実際書き比べてみると便利さがよくわかります・・・
| 投稿日 |
2008年6月30日 20:28 |
| カテゴリ |
JavaScript |
| タグ |
jQuery | サンプルコード |
| トラックバック URL |
http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1131 |
2009年1月 9日 13:39
jQueryを利用したページ内リンクを自動作成するスクリプト続きを読む
2009年1月20日 17:21
「innerText」はFirefoxで利用できないようなので、try～catchで分岐させようと思ったけどダメだったのでｊQueryのブラウザ判定を利用...続きを読む
2009年1月27日 22:15
jQueryオブジェクトについていろいろ気になったので調べてみたらいろいろとわかっていい勉強になったよって話続きを読む
2009年1月29日 17:11
ひとつの要素がtrue(表示)の時、その他の要素をfalse(非表示)にさせる仕組み続きを読む
2010年1月19日 12:18
jQuery stop()のいろいろな機能を試してみたよ続きを読む
2011年12月 9日 01:55
jQuery APIリファレンスをみて、jQuery.each()とjQuery(selector).each()のような同じ名前のメソッドで何が違うんだ...続きを読む
2011年12月12日 11:25
jQueryに1年以上前から公式なテンプレートエンジンがあった件続きを読む