div要素をランダムに表示させたい

解決済

質問者：wakagi
質問日時：2009/03/19 20:50
回答数：3件

お世話になります。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;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： heikuu2009
回答日時：2009/03/19 21:29

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をふったほうがやりやすいです

この回答への補足

一部質問内容に必要の無い記述がありました、すいません！
html部分のリストが無い状態で、考えたときはどうなりますか？

ページを表示するたびにdivの要素がランダムに表示するように考えているのですが、どうしたらいいでしょうか？

補足日時：2009/03/19 21:48

通報する

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。heikuu2009様から頂いた回答内容は既に、実現が出来ていました。その機能プラスページをリロードする度に内容がランダムに出したいと考え今回、質問させて頂きました。
自分の説明不足もありまして、お手間を取らせました。何とかやりたいことは実現できました。ありがとうございます。

通報する

お礼日時：2009/03/23 16:41

No.3

回答者： _pipi_
回答日時：2009/03/20 11:46

<!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>