javascript 配列内の条件抽出方法

質問

以下のような配列を記述したのですが、
ちょっと分からなくなったので教えてください。

mozi = new Array();
mozi[0]= new Array("off","1番目");
mozi[1]= new Array("on","2番目");
mozi[2]= new Array("on","3番目");
mozi[3]= new Array("on","4番目");

document.write("<p>"+mozi[i][1]+"</p>");　←この命令文はダミーです。

【実現したいこと】

・上からチェックして、配列内に「on」がある場合、「○番目」という文字を表示する。
・3秒後に次の配列の「○番目」という文字を表示する。
・最後までいったら、また頭に戻って表示する。

上記の例の場合、
mozi[1]の「2番目」を表示→3秒経過→mozi[2]の「3番目」を表示→3秒経過→mozi[3]の「4番目」を表示→mozi[1]の「2番目」を表示に戻る

配列内の条件チェックと、順番に表示する記述方法が分からないので、
教えてください。よろしくお願いいたします。

回答No.3

yambejp · ベストアンサー

>最初に2秒まってから「2番目」が表示されるようです

ああ、そりゃそうですね。失礼しました。
関数化して最初に呼び出してからあとは繰り返し処理をすればいいです。

<script>
var counter=0;
mozi = new Array();
mozi[0]= new Array("off","1番目");
mozi[1]= new Array("on","2番目");
mozi[2]= new Array("on","3番目");
mozi[3]= new Array("on","4番目");
mozi2=new Array();
for(var i in mozi){
if(mozi[i][0]=="on") mozi2.push(mozi[i][1]);
}

function doCount(){
document.getElementById("hoge").innerHTML=mozi2[counter];
counter=(counter<mozi2.length -1)?counter+1:0;
}
window.onload=function(){
doCount();
setInterval(function(){doCount()},2000);
}
</script>

<div id="hoge"></div>

お礼

回答ありがとうございました。

希望の動作が実現できました。大変助かりました。
こちらをベストアンサーとさせていただきます。

回答No.2

hitomura

……なんかフォームの操作によってmojiの内容が変わりそうに見えるな……

もしその場合、#1様の方法では対応できなくなります。
以下のようにしてください。
（無論、ページを開いた時点でmojiの内容が決まっているならば#1様の方法のほうがコードが短く簡易です）

<script>
var counter=0;
mozi = new Array();
mozi[0]= new Array("off","1番目");
mozi[1]= new Array("on","2番目");
mozi[2]= new Array("on","3番目");
mozi[3]= new Array("on","4番目");

// 現在のカウンターの次にonになっている番号を探す
// 見つからない（全部offになっている）場合は現在のカウンターの値を返す
function next()
{
var i;
for (i = counter + 1; i < mozi.length; i++){
if (moji[i][0] == "on") return i;
}
for (i = 0; i < counter; i++){
if (moji[i][0] == "on") return i;
}
return counter;
}

window.onload=function(){
setInterval(function(){document.getElementById("hoge").innerHTML=mozi[counter][1];counter=next()},3000);
}
</script>
<div id="hoge"></div>

お礼

回答ありがとうございます。

実際に動作を確認したところ、
3秒wait→1番目→2番目→3番目→4番目→2番目...となり、
最初に「1番目」が表示されてしまうようです。

回答No.1

yambejp

予め条件に併せて抽出しておき、あとはグローバル変数をカウンタにすればよいでしょう

<script>
var counter=0;
mozi = new Array();
mozi[0]= new Array("off","1番目");
mozi[1]= new Array("on","2番目");
mozi[2]= new Array("on","3番目");
mozi[3]= new Array("on","4番目");
mozi2=new Array();
for(var i in mozi){
if(mozi[i][0]=="on") mozi2.push(mozi[i][1]);
}
window.onload=function(){
setInterval(function(){document.getElementById("hoge").innerHTML=mozi2[counter];counter=(counter<mozi2.length -1)?counter+1:0},2000);
}
</script>

<div id="hoge"></div>

お礼

早速回答いただきありがとうございます。
大変勉強になります。実際に動作を確認しましたが、
ほぼ希望通りの動きができました。

ただ、ブラウザでロードすると、最初に2秒まってから「2番目」が表示されるようです。これを遅延なしで表示するのは難しいでしょうか。

よろしければご教示ください。