- ベストアンサー
動かない理由を解明！JavaScriptで要素表示制御のトラブルシューティング
- HTMLの要素をJavaScriptで表示制御する際に、要素が正しく表示されないトラブルが発生しています。
- 特に、「BをクリックしてAを消す、Bを出す」という操作が上手く動作せず、困っています。
- 問題解決のために、以下の点について確認してください。 1. 全て閉じられている場合、対象要素を開く処理が正しく行われているか 2. 対象要素が開いている場合、対象要素を閉じる処理が正しく行われているか 3. 対象要素が閉じられている場合、全ての要素を閉じる処理と対象要素を開く処理が正しく行われているか
- idhokanohi
- お礼率58% (48/82)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
さっきの質問に対してサンプルを書いている途中で締め切られてしまい、 回答できなくなってしまっていました。 なので、再度書かせていただきます。 何故か、 document.getElementsByName('more'); でdiv要素のname属性を取得できず(調べてみるとどうやら本来は div要素にname属性は指定できない模様) document.getElementsByTagName('div'); でdiv要素を一度取得してこれをループ処理し、name属性が'more'の もののみを配列に格納してそれをループ処理させることで無理矢理 実現させてみましたがこれでどうでしょうか。 // JavaScript function yomu(t) { // 配列オブジェクトを作成 var more = new Array(); // div 要素をすべて取得 var divs = document.getElementsByTagName('div'); // div 要素の中から name 属性が 'more' であるものを // 配列に入れる for(var i = 0; i < divs.length; i++) { if(divs[i].name == 'more') { more.push(divs[i]); } } // 配列をループ処理する for(var i = 0; i < more.length; i++) { if(t.name == i) { more[i].className = (more[i].className == 'hide' ? 'show' : 'hide'); } else { more[i].className = 'hide'; } } } /* CSS */ <style> .hide { display: none; } .show { display: block; } <!-- HTML --> <a name="0" onclick="yomu(this);">A</a> <div name="more" class="hide">Aの詳細</div> <a name="1" onclick="yomu(this);">B</a> <div name="more" class="hide">Bの詳細</div> <a name="2" onclick="yomu(this);">C</a> <div name="more" class="hide">Cの詳細</div>
お礼
回答ありがとうございます。まさにこれです！ 配列オブジェクトなんてものが作れるのですね。 .push これは他にもいろいろ使えそう、本当にありがとうございました！