- ベストアンサー
複数項目の表示切替え
JavaScriptを使用し、特定の文字や文の表示・非表示を切り替えられるページを作ろうとしています。 検索サイトを使って探してみましたが、リンクやボタンを切り替える部分が一対一対応のものしか見つけられませんでした。 一箇所のクリックで複数の項目を切り替えられるスクリプトをご存知の方、答えの一部かヒントをいただけないでしょうか。 ちなみに全くの素人ではなく初心者のレベルです。getElementByIdで一対一対応のやり方は理解できてきたところです。 なお、同時に切り替える部分が最低でも10以上ですので、一対一対応のものを並べる形は避けたいと思っています。
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは 一例として・・・ getElementById("")ではなくgetElementsByTagName("")やgetElementsByClassName("")を使用すればできます 上の<script>～</script>がgetElementsByTagName用、 下の<script>～</script>がgetElementsByClassName用 <script type="text/javascript"><!-- function tagopen() { tags = document.getElementsByTagName("div"); for(i=0;i<tags.length;i++) { tags[i].style.display = "block"; } } function tagclose() { tags = document.getElementsByTagName("div"); for(i=0;i<tags.length;i++) { tags[i].style.display = "none"; } } //--></script> <script type="text/javascript"> <!-- document.getElementsByClassName = function (className) { var i, j, eltClass; var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; var objCN = new Array(); for (i = 0; i < objAll.length; i++) { eltClass = objAll[i].className.split(/\s+/); for (j = 0; j < eltClass.length; j++) { if (eltClass[j] == className) { objCN.push(objAll[i]); break; } } } return objCN; } function classopen() { CLASS = document.getElementsByClassName("test"); for(i=0;i<CLASS.length;i++) { CLASS[i].style.display = "block"; } } function classclose() { CLASS = document.getElementsByClassName("test"); for(i=0;i<CLASS.length;i++) { CLASS[i].style.display = "none"; } } //--> </script> <style type="text/css"> .test { display:none; } </style> </head><body> <input type="button" value="tag open" onclick="tagopen()"> <input type="button" value="tag close" onclick="tagclose()"> <input type="button" value="class open" onclick="classopen()"> <input type="button" value="class close" onclick="classclose()"> <div class="test">0</div> <div class="test">1</div> <div class="test">2</div> <p class="test">3</p> <p class="test">4</p> <p class="test">5</p>
その他の回答 (1)
- arexis
- ベストアンサー率66% (66/99)
その『複数の場所』がひとつの連続してる集団であれば そこをDIVタグで囲んで、そのDIVを 表示・非表示にすれば一括です。 複数の場所が、点在してる場合で、記述で並べるのが嫌 と言う事なら ID名をあらかじめグループ化するか配列に入れて置いてfor文で回すのがわかりやすいかも？ と思います。 クリックなどの起動動作 onclick = "関数('block')" //引数は styleの値 ↓ GroupA+数字というIDをつけてある場合 関数(arg){ for(var i=0; i<20; i++){ document.getElementById('GroupA' + i).style.display = arg; } } 配列にしておく場合(IDのグループわけが無理な場合) スクリプト冒頭に var GroupA = ['aaa','cccc','eeee','gggg']; の様に一括で動かすグループを作っておく 関数(arg){ for(var i=0; i<GroupA.length; i++){ document.getElementById(GroupA[i]).style.display = arg; } }
お礼
ありがとうございます。 for文というのは気づきませんでした。試させていただきます。
お礼
ありがとうございます。 そんなメソッドがあったんですね。 再質問の形になって申し訳ないのですが、上のスクリプトでは<div>タグの項目すべて、下のスクリプトは「class="test"」の項目すべてがまとめて切り替えられるということですよね？ 早速試させていただきます。