![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?c9bd177)
こちらでよくお世話になっています。
JavaScriptに詳しい方、どうか教えてください。
当方、まだまだJavaScriptは初心者です。
以下のようなHTMLがあって、
コンテンツ部分を普段は非表示で
タイトル部分をクリックしたら、
その下の表示・非表示が切り替わるようにしたいと考えています。
(アコーディオンの感じです。)
-------------------------
<div id="title1">タイトル1</div>
<table id="contents1">
<tr><td>コンテンツ1</td></tr>
</table>
<div id="title2">タイトル2</div>
<table id="contents2">
<tr><td>コンテンツ2</td></tr>
</table>
<div id="title3">タイトル3</div>
<table id="contents3">
<tr><td>コンテンツ3</td></tr>
</table>
ちなみに、それぞれタイトルとコンテンツがセットになっていて、
titleのid名の末尾の番号と
そこをクリックしたら、開閉するtableのid名の末尾の番号を一致させています。
※このタイトルとコンテンツは動的に増えたり減ったりします。
プラグインを入れないで
自分でjavascriptを組みたいと考えているのですが
どのようにすればよいのか、分からず
こちらで質問をさせていただきました。
var divList = document.getElementsByTagName('div');
for(i=0; i<divList.length; i++){
}
のようにやっていくのだろうとは思うのですが
for文の中をどのように書いたらよいかを
ご教授いただけたら助かります。
どうぞ宜しくお願いいたします。
No.2ベストアンサー
- 回答日時:
構造が確定ということであれば敢えて文句をつけることはありません。
divとtableに相関関係がない以上、idをつかってひもづけるのが妥当ですね
かなり雑ですが、以下参考にしてください。
(本来であればクラス名の競合・排他処理など必要です)
<script>
window.onload=function(){
hideTable();
}
function hideTable(){
var tables=document.getElementsByTagName("table");
for(var i=0;i<tables.length;i++){
var t=tables[i];
var reg=new RegExp("^contents[0-9]+$");
if(reg.exec(t.id)){
t.className="hide";
}
}
}
try{
document.addEventListener ('click',function(e){clickfunc(e)},true);
}catch(e){
document.attachEvent('onclick',function(e){clickfunc(e)});
}
function clickfunc(e){
var t = (e.srcElement || e.target);
var reg=new RegExp("^title([0-9]+)$");
if(t.nodeName=="DIV" && (r=reg.exec(t.id))){
hideTable();
document.getElementById("contents"+r[1]).className="";
}
}
</script>
<style>
.hide{
display:none;
}
</style>
<div id="title1">タイトル1</div>
<table id="contents1">
<tr><td>コンテンツ1</td></tr>
</table>
<div id="title2">タイトル2</div>
<table id="contents2">
<tr><td>コンテンツ2</td></tr>
</table>
<div id="title3">タイトル3</div>
<table id="contents3">
<tr><td>コンテンツ3</td></tr>
</table>
スクリプトまで書いていただきありがとうございます。
正規表現を使って、idの値を取得する方法があるんですね。
実は、スクリプトで分かっていない所もあるんですが
勉強して、読み解きたいと思います。
ですが、実は、書いていただいた方法で
期待通りに動かず、残念です。
他に何かしらの処理が必要なのか、
何か干渉しているのか…
ただ、書いていただいのを参考にしつつ
ちょっと別の方法で何とかできました。
大変参考になり、勉強させていただきました。
取り急ぎ御礼申し上げます。
No.3
- 回答日時:
処理の中で同じ扱いをするものには個別のIDを付けて識別しない方がよろしいと思います。
数が可変とのことなのでならなおさらでしょうか。できれば全体をくくる要素に一箇所だけidを付けておいて、あとは必要に応じてclass設定を行なうか、あるいは、HTMLの構成さえうまく作ってあれば位置関係のみで判断可能になるのでclassも不要になりそうに思います。
その意味からも、ANo1様の提示なさっているマークアップの方が一般的かと。
とはいうものの、変更ができないようなので…
>var divList = document.getElementsByTagName('div');
>for(i=0; i<divList.length; i++){
ドキュメント内の全div要素を拾っていますので、まず、対象になるdivだけを絞り込んでおいたほうが賢明かと思います。
そういう意味からもラップ要素を特定できた方が賢明です。
そのままなら、idが「tile##」のdivを検出することになろうかと…
一方で、対象のidが「tilte##」、「contents##」ってのもあまりにもなので、スクリプトを作成してもそのままでは再利用もできないような気がします。
とはいうものの、あれこれ言うだけでは進まないでしょうから、
ライブラリを使わずに似たことを行なう解説をしているサイトがありました。
スクリプトの内容としては決してお薦めするものではありませんが、まったく手がつかないようですので手掛かりにでもなれば。
(クリックではなく、ホバーで動作するようになっています)
http://plusone.jpn.org/javascript/sample/acc/aco …
上にも書きましたが、このサンプルの方法に捕われずに、要素のidに頼らないで処理できる方法を、また、onclick属性をあちこちに書かずにすむ方法を考えてみることをお勧めします。
設計する上でのポイントを教えていただき、
ありがとうございます。
それも大変、丁寧で分かりやすいです。
作り込む上で、どのように作っていくかが
まだまだ見通せず、スクリプトを書く前に
手がつかないのは、まさにそのとおりです。
それには、もっと、いろいろな場所で
書きこまなくてはダメですね。
大変、参考になりました。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの行数を可変長にした...
-
<JavaScript>tableタグを入力不...
-
borderの指定方法
-
クリックごとに文字色が交互に...
-
Javascriptでテーブルタグの座...
-
[JavaScript]ボタンを押下する...
-
return trueとreturn falseの用...
-
BackSpaceしたい(QNo.2734284の...
-
オブジェクト配列
-
チェックボックスで合計値を計...
-
onchange等のイベントハンドラ...
-
Acrobat Java Scriptについて教...
-
JavascriptからSQLへ繋ぎ方が分...
-
setIntervalの間隔を途中で変更...
-
jQuery テキストボックス読み取...
-
checkboxをクリックしてリロー...
-
チェックボックスのON/OFFに応...
-
プルダウン選択を変更すると、...
-
【診断テストの作り方】結果に...
-
JavaScriptを用いてテキストボ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
テーブルの行数を可変長にした...
-
画面表示とともに、テーブルの...
-
selectのonChangeが動作しません
-
【jQuery】tableループ内のIDの...
-
javascriptで画像をテーブルに...
-
Tableの枠線(内・外)色を変更
-
テキストエリアに入力した改行...
-
クリックごとに文字色が交互に...
-
javascript でテーブル操作
-
JQueryでテーブルの行を追加し...
-
javascriptで<table>背景色の取得
-
idの振り直しについて
-
テーブルのセルのクリック時、...
-
<iframe>内にHTMLをランダム表...
-
javascriptでスロットマシン
-
プルダウンメニューを表の中に...
-
連動テーブルのクロスハイライト
-
簡単なJavaスロットマシーンに...
-
jquery にて、アラートダイアロ...
おすすめ情報