お世話になります。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;
}
投稿日時 - 2009-03-19 20:50:59
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をふったほうがやりやすいです
投稿日時 - 2009-03-19 21:29:00
補足
一部質問内容に必要の無い記述がありました、すいません！
html部分のリストが無い状態で、考えたときはどうなりますか？
ページを表示するたびにdivの要素がランダムに表示するように考えているのですが、どうしたらいいでしょうか？
投稿日時 - 2009-03-19 21:48:20
お礼
回答ありがとうございます。heikuu2009様から頂いた回答内容は既に、実現が出来ていました。その機能プラスページをリロードする度に内容がランダムに出したいと考え今回、質問させて頂きました。
自分の説明不足もありまして、お手間を取らせました。何とかやりたいことは実現できました。ありがとうございます。
投稿日時 - 2009-03-23 16:41:10
2人が「このQ&Aが役に立った」と投票しています
ベストアンサー以外の回答（2件中 1～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>
投稿日時 - 2009-03-20 11:46:49
お礼
回答ありがとうございます。参考にさせて頂きます。
投稿日時 - 2009-03-23 16:42:12
OKWaveのオススメ
おすすめリンク
