javascriptの記述について

解決済

質問者：tomo19860508
質問日時：2012/04/04 22:10
回答数：1件

私は最近javascriptの勉強を始めたプログラム初心者です。
下記のjavascriptについてお聞きしたいです。
ｃｓｓ
*{
line-height: 1.5em;
}

#wrapper{
width: 380px;
margin: 16px;
}
h1{
font-size: 20px;
border: solid 2px orange;
padding: 2px 4px;
margin: 1em 0 0.5em 0;
}
h2{
background: lightblue;
padding: 2px 4px;
font-size: 12px;
margin: 1em 0 0.5em 0;
}
p{
font-size: 12px;
}
.close{
display: none;
}
.open{};

<script type="text/javascript">
window.addEventListener( 'load',
function(event){
var elem = document.getElementById('lnk_closeAll');
elem.addEventListener('click', closeAll, false);
var elem = document.getElementById('lnk_openAll');
elem.addEventListener('click', openAll , false);
//全見出しに設定
setEventToTitles();
}
, false);

//開閉関数
function openAll(event){
event.preventDefault();
changeAll(false);
}
function closeAll(event){
event.preventDefault();
changeAll(true);
}
//trueならすべて閉じる、falseならすべて展開
function changeAll(close){
var titles = document.getElementsByTagName('h2');
for(var i=0; i<titles.length; i++){
var parent = titles[i].parentNode;
var topics = parent.getElementsByTagName('div');
for(var j=0; j<topics.length; j++){
if(close){
topics[0].className = 'close';
} else {
topics[0].className = 'open';
}
}
}
}

//状態を反転する
function setEventToTitles(){
var titles = document.getElementsByTagName('h2');
for(var i=0; i<titles.length; i++){
titles[i].addEventListener('click', toggleTopic, false);
}
}
function toggleTopic(event){
var title = event.currentTarget;
var parent = title.parentNode;
var topics = parent.getElementsByTagName('div');
if(topics[0].className == 'close'){
topics[0].className = 'open';
} else {
topics[0].className = 'close';
}
}
</script>
</head>
<body>
<div id="wrapper">
<h1>よくある質問と回答</h1>
<p>
<a id="lnk_closeAll" href="#">すべて閉じる</a>
<a id="lnk_openAll" href="#">すべて展開</a>
</p>

<div id="topic1">
<h2>電源ランプが赤く光り、しばらくすると製品が動かなくなります</h2>
<div class="close">
<p>電源ランプが赤く光るのは内蔵バッテリーが消耗していることを示しています。
コンセントを接続して充電してください。</p>
</div>
</div>

<div id="topic2">
<h2>ときどきブザーが鳴りますが、問題ないでしょうか？</h2>
<div class="open">
<p>本製品の長時間利用により低温やけどを負うことがあります。
長時間使い続けていることをユーザーに伝えるため、
4時間15分32秒ごとにピッピッという警告音を鳴らすようにしております。</p>
</div>
</div>

<div id="topic3">
<h2>製品を床に落としてしまいました。問題ないでしょうか？</h2>
<div class="open">
<p>本製品は高さ1メートルからの落下テスト10万回をパスしております。
ただし、1メートル以上の高さから落下した場合は、
故障する可能性がありますので、お近くのサービスセンターにご相談ください。</p>
</div>
</div>
</div>

このプログラムは画像のようにすべて閉じるを押すと説明文が閉じ、
すべて開くを押すと説明文がすべて開きます。
わからない箇所は、
if(topics[0].className == 'close'){
topics[0].className = 'open';
} else {
topics[0].className = 'close';
箇所でどうしてtopics[i]ではなくtopics[0]なのでしょうか。
参考書には「NodeListオブジェクトとして返されますが、必要なのは最初の1つだけなので[0]で先頭要素にアクセスし
classNameプロパティに[close]か[open]を設定する」と記載されています。
ですが、なぜ必要なのは最初の1つだけなのでしょうか？
カウンタiを一つづつふやし、一つ筒divに[close]か[open]を設定しないのでしょうか。
試しにtopics[i]にすると動きません。。。
topics[0]だと動くのに。。。

通報する

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

質問の本文を隠す

回答 (1件)

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

No.1ベストアンサー

回答者： hitomura
回答日時：2012/04/05 02:50

JavaScriptが参照する起点の要素がh2タグだからです。

（Qをクリックしたときはeventオブジェクトから取り出し、「すべて～」をクリックしたときはdocument.getElementsByTagName('h2')の結果の各要素に対して処理）
そこからparentに行き、その中のdivを探していますが、どのh2タグもその親要素の中にあるdivは1つだけなのでNodeListオブジェクトにはその1個以外はありません。