- ベストアンサー
div要素をランダムに表示させたい
お世話になります。Javascriptについて質問させていただきます。 拙い説明で分かりにくいかと思いますが、ご教授いただけたらと思います。 javascriptとcssを使用して、ページをリロードする度に、divの要素をランダムに表示させるようにしたいと考えています。 ランダムで表示させるにはfunction test(no)関数のどこかにランダムで値を取得できるようにする必要があると思っているのですが、上手く設定ができずに悩んでいます。 ご回答頂けたら幸いです。 ■ html <body onLoad="test(no)"> <div id="link"> <div class="link01"> <p>文章1</p> </div> <div class="link02"> <p>文章2</p> </div> <div class="link03"> <p>文章3</p> </div> </div> <ul> <li><a href="#" onclick="showChanger(1);">リンク1</a></li> <li><a href="#" onclick="showChanger(2);">リンク2</a></li> <li><a href="#" onclick="showChanger(3);">リンク3</a></li> </ul> ■javascript function test(no){ var parenObj=document.getElementById("link"); for(var i in parenObj.childNodes){ var childObj=parenObj.childNodes[i]; if(childObj.tagName=="DIV"){ if(no == 1){ if(childObj.className=="link01"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 2){ if(childObj.className=="link02"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 3){ if(childObj.className=="link03"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } } } } ■css .link01 { display:block; margin-bottom:10px; } .link02 { display:none; margin-bottom:10px; } .link03 { display:none; margin-bottom:10px; }
- wakagi
- お礼率70% (21/30)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
function test(){ var i, a, divLen = 0; var t = document.getElementById('link'); for(i = 0; ( a = t.getElementsByTagName('div')[i]); i ++,divLen ++){ a.style.cssText = 'display:none;margin-bottom:10px;'; } t.getElementsByTagName('div')[Math.floor(Math.random()*divLen)].style.display = 'block'; } function showChanger(n){ var i, a; for(i = 0; (a = document.getElementById('link').getElementsByTagName('div')[i]); i ++){ a.style.display = (i+1 == n) ? 'block' : 'none'; } } <div id="link"> <div class="link01"> <p>文章1</p> </div> <div class="link02"> <p>文章2</p> </div> <div class="link03"> <p>文章3</p> </div> </div> <ul> <li><a href="javascript:void(0)" onclick="showChanger(1);return false;">リンク1</a></li> <li><a href="javascript:void(0)" onclick="showChanger(2);return false;">リンク2</a></li> <li><a href="javascript:void(0)" onclick="showChanger(3);return false;">リンク3</a></li> </ul> 数が増えるんだったらこう書いたほうがいいのかな？ ・CLASSじゃなくてIDをふったほうがやりやすいです
その他の回答 (2)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Random display</title> <div id="p"> <div class="rand a">123</div> <div class="rand b">456</div> <div class="rand c">789</div> <div class="rand d">012</div> <div class="e rand">345<div>これがまずい</div></div> </div> <script type="text/javascript"> //全角空白は半角空白かタブに変換のこと //@cc_on /*@if (1) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ 'load', function () { var _TARGET_DIV = 'p'; var _TARGET_CSS = 'rand'; var cnt = 0; var c = document.getElementById(_TARGET_DIV).firstChild; var r = new RegExp( '\\b' + _TARGET_CSS + '\\b'); var objs = []; while (c) { if (c.tagName == 'DIV' && c.className.match(r)) c.style.display = 'none'; objs.push(c); cnt++; c = c.nextSibling; } objs[Math.random()*cnt|0].style.display = 'block'; }, false); </script>
お礼
回答ありがとうございます。参考にさせて頂きます。
- heikuu2009
- ベストアンサー率33% (5/15)
先ほどの回答について動作確認はされていないのでしょうか？ まずは、あなたが要求する動作が実現されているか確かめてください。
お礼
回答ありがとうございます。heikuu2009様から頂いた回答内容は既に、実現が出来ていました。その機能プラスページをリロードする度に内容がランダムに出したいと考え今回、質問させて頂きました。 自分の説明不足もありまして、お手間を取らせました。何とかやりたいことは実現できました。ありがとうございます。
補足
一部質問内容に必要の無い記述がありました、すいません！ html部分のリストが無い状態で、考えたときはどうなりますか？ ページを表示するたびにdivの要素がランダムに表示するように考えているのですが、どうしたらいいでしょうか？