WEBプログラム覚書::jQueryによる表示、非表示切り替え

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>