読者です 読者をやめる 読者になる 読者になる

Paradise Lost

駄人間にならないための日々の記録

JavaScriptでデータの整形&折りたたみリンクでの表示非表示切り替え方法

リセマラ等の記事内で大量のデータを記事に入れるとページが長くなるのが嫌だったので、データ部分を非表示にする関数が必要になりました。
そこでデータの整形をして、それを折りたたみリンクとして初期状態では非表示にする関数を作りました。
私はJavaScriptは無学なのでいろいろおかしな部分があるかもしれませんので、見つけたらご指摘いただけるとありがたいです。

折りたたみリンク部分(show関数)は、こちらの記事の関数を使わせていただきました。折りたたみ部分の解説はこちらの記事を見た方がわかりやすいかと思います。

何をしているかはコメントの部分で軽く説明します

コード

// divタグの設定
<div id ="day"></div>

<script language=javascript>
<!--
// 折りたたみ関数
function show(inputData) {
    // IDからオブジェクトの取得
    var objID=document.getElementById( "layer_" + inputData );
    var buttonID=document.getElementById( "category_" + inputData );
    // 取得したオブジェクトが閉じた状態の時
    if(objID.className=='close') {
        // 表示してクラスをopenに変更する
        objID.style.display='block';
        objID.className='open';
    // 開いた状態の時
    }else{
        // 折りたたんでクラスをcloseにする
        objID.style.display='none';
        objID.className='close';
    }
}

// 文字列を整形して折りたたみリンクを作成する関数
function hidden(data, divname){
    var a = [] // リンクにするaタグのオブジェクトを入れる配列
    var div = [] // 折りたたむデータを入れるdivタグのオブジェクトを入れる配列
    // リンクにする項目の数だけループ
    for(i=0;i<data.length;i++){
        // 折りたたみリンクにするaタグの作成をしてオプションを設定して指定したdivタグに加える
        a.push(document.createElement('a'));
        a[i].href = "javascript:void(0)";
        a[i].id = "category_" + data[i][0];
        a[i].name = data[i][0];
        a[i].onclick = function(){show(this.name);};
        a[i].innerHTML = data[i][0]+"<br/>";
        document.getElementById(divname).appendChild(a[i]);
        // 隠す文字列を入れるdivタグを作成してオプションを設定して指定したdivタグに加える
        div.push(document.createElement('div'));
        div[i].id = "layer_" + data[i][0];
        div[i].style.display='none'
        div[i].className = "close";
        div[i].innerHTML = "";
        document.getElementById(divname).appendChild(div[i]);

        // 隠す文字列をデータから作成して上で作ったdivタグにテキストとして加える
        var str="";
        for(j = 1; j < data[i].length; j++){
            str += j + " " + "☆" + data[i][j][0] + " " + data[i][j][1] + "<br/>";
        }
        document.getElementById("layer_" + data[i][0]).innerHTML=str;
    }
}

// 隠す文字列にするデータ配列
var data = 
[["5/2",[3,"ドラゴンゾンビ"],[3,"白龍"]],
["5/3",[5,"ロキ"],[5,"ネプチューン"]]];

// 関数呼び出し
hidden(data,"day");
-->
</script>

実行結果

使い方

  1. 折りたたみリンクを入れたい部分に<div id ="id(何でもよい)"></div>を入れる
  2. データ配列の作成(データ配列の形式はhidden関数の最後の部分を変えていただければ自由に変えられますが、この例では[["日付",[レア度,"モンスター名"]],["日付",[レア度,"モンスター名"]…]]]となっています)
    例: var data = [["5/2",[3,"ドラゴンゾンビ"],[3,"白龍"]], ["5/3",[5,"ロキ"],[5,"ネプチューン"]]];
  3. 適当な所で関数を定義してhidden(データの配列,"divで定義したid");で呼び出す