JavascriptでJQueryを使わず、アコーディオンを作っています。
そこで、一旦コードは完成しているのですが、これをもっと簡略化することになりました。for文とquerySelectorAllを使うとのことなのですが、どちらも使ってみると、clickイベントがうまく反映されません。
どうすればうまくまとめられますか？
一旦完成されているコードは下記のようになっています。
dtをクリックしたらddを表示、または非表示、HTMLを読み込んだ際は非表示から始めたいです。
初めて質問するので、わかりにくかったらすみません…。

Javascript
1var a=document.getElementById("art_content");
2a.style.display="none";
3document.getElementById("art").onclick=function(e){
4var str = document.getElementById("art_content");
5if(str.style.display == "none"){
6  str.style.display="block";
7}else{
8  str.style.display="none";
9}
10}
11
12var b=document.getElementById("science_content");
13b.style.display="none";
14document.getElementById("science").onclick=function(){
15var str = document.getElementById(“science_content");
16if(str.style.display == "none"){
17  str.style.display = "block";
18}else{
19  str.style.display = "none";
20  }
21}
22
23var c=document.getElementById(“math_content");
24c.style.display="none";
25document.getElementById("math").onclick=function(){
26var str = document.getElementById("math_content");
27if(str.style.display == "none"){
28  str.style.display = "block";
29}else{
30  str.style.display = "none";
31  }
32}
33
34

m.ts10806

2019/02/15 04:47

再現確認に必要なのでHTML、CSSもあわせてご提示ください。

m.ts10806

2019/02/15 04:49

ちなみに「うまくいかない」だけでは何が起きているか伝わりませんし、そのコードを提示しないことには「丸投げ作業依頼」に等しい内容となってしまいます。内容ご調整ください。

行動規範の内容に同意します

回答4件

イベントはルートで監視します
クラスに"accordion"があれば複数動作します

html
1<!DOCTYPE html>
2<title>?</title>
3<meta charset="utf-8">
4<style>
5dl.accordion dt { cursor: pointer; }
6dl.accordion dd { display: none; }
7dl.accordion dt.active+dd { display: block; }
8</style>
9
10<body>
11<dl class="accordion">
12<dt>a<dd>abcdefg
13<dt>1<dd>1234567
14<dt>ABC<dd>ABCDEFGHIJK
15</dl>
16
17<script>
18
19function disp (dt) {
20  let p = dt.parentNode;
21  if (p.classList.contains ('accordion'))
22    dt.classList.toggle ('active');
23}
24
25
26function handler (event) {
27  let e = event.target;
28  if ('DT' === e.tagName)
29    disp (e);
30} 
31
32document.addEventListener ('click', handler, false);
33
34</script>

投稿2019/02/15 06:09

編集2019/02/15 06:36

退会済みユーザー

総合スコア0

退会済みユーザー

2019/02/15 06:37 編集

そういえば、 $(document).on(eventName, target, function); の考えってこれだったね

退会済みユーザー

2019/02/15 07:26

jQuery ? そんなの知らな～い。素でできるようなことを・・・

行動規範の内容に同意します

こんなことかな？[動くサンプル]

javascript

var dts = document.getElementsByTagName('dt');
for (var dt of dts) {
    console.log(dt);
    dt.addEventListener("click", function(e) {
        e.target.classList.toggle("active");
    });
}

css

dt {
    cursor: pointer;
}

dd {
    display: none;
}

dt.active+dd {
    display: block;
}

投稿2019/02/15 05:01

退会済みユーザー

総合スコア0

退会済みユーザー

2019/02/15 05:22

サンプルと同様の動きであってます！ただ、asahina1979さんのコードをjavascriptに入れてもクリックした時の表示、非表示の動作が切り替わりません...。

papinianus

2019/02/15 05:26

cssを前提にしておられるので。

退会済みユーザー

2019/02/15 05:30 編集

それか、HTMLの構成が間違えてるのね HTML の構造としては dl ├dt ├dd が正常で dl ├dt │├dd は不正です。 After dt or dd elements inside dl elements. https://html.spec.whatwg.org/multipage/grouping-content.html#the-dd-element

行動規範の内容に同意します

html
1<html>
2<body>
3<dl>
4<dt id='art'>a</dt>
5<dd id='art_content'>ac</dd>
6<dt id='science'>s</dt>
7<dd id='science_content'>sc</dd>
8<dt id='math'>m</dt>
9<dd id='math_content'>mc</dd>
10</dl>
11<script language='javascript'>
12['art','math','science'].forEach(id => {
13  document.querySelector(`#${id}_content`), elm => elm.style.display="none");
14  document.querySelector(`#${id}`).addEventListener('click', elm => {
15    const child = document.querySelector(`#${id}_content`)
16    child.style.display = child.style.display === 'none' ? 'block' : 'none'
17  });
18});
19</script>
20</body>
21</html>

欲しいであろうもの

javascript
1<html>
2<body>
3<dl>
4<dt id='art'>a</dt>
5<dd id='art_content'>ac</dd>
6<dt id='science'>s</dt>
7<dd id='science_content'>sc</dd>
8<dt id='math'>m</dt>
9<dd id='math_content'>mc</dd>
10</dl>
11<script language='javascript'>
12const dds = document.querySelectorAll('dd');
13for(let i = 0; i < dds.length; i++) {
14  dds[i].style.display = 'none';
15}
16const dts = document.querySelectorAll('dt');
17for(let i = 0; i < dts.length; i++) {
18  const id = dts[i].id;
19  dts[i].addEventListener('click', elm => {
20    const child = document.querySelector(`#${id}_content`)
21    child.style.display = child.style.display === 'none' ? 'block' : 'none'
22  });
23}
24</script>
25</body>
26</html>

投稿2019/02/15 05:03

編集2019/02/15 05:35

papinianus

総合スコア12705

papinianus

2019/02/15 05:11

htmlがないんで想像です。ところで、現状、idベースで動いているじゃないですか？でidってdomに1個しかないじゃないですか？って考えるとですね、forとかquerySelectorAllとかってお呼びじゃないんです。 asahina1979様のがうまくforとquerySelectorAllを使えてますし、コードとしては汎用的なんですけど、もはや別モノですよね。

退会済みユーザー

2019/02/15 05:16

HTMLがひどい・・・ <dt>の親要素は<dl>のみ <dd>の親要素は<dl>のみ <html> の子要素は <head>、<body>のみ

退会済みユーザー

2019/02/15 05:20

実際forやquerySelectorAll使わない方がわかりやすいんでしょうか？動きとしてはpapinlanusさんのを使うと思った通りに動きます！

papinianus

2019/02/15 05:25

asahina1979様すみませんでした。直しました。 yoshino543様 forはまだ使えると思いますが、idベースで動いている以上、querySelectorAllは出番なくないですか？idなんで、Allって言ったところで1個しか取れないわけで、1個しか取れないと分かってるなら、querySelectorにしたほうが要素そのものが取れるので。

退会済みユーザー

2019/02/15 05:48

私もあまり使い道がわからず、悩んでいました、メンターからの指示でしたのでわざと使おうとしてたのですが、そうですよね、聞いてみます。

papinianus

2019/02/15 05:51

たぶん、こういうことが言いたいんだろうという忖度コードを追記してます。

行動規範の内容に同意します

ベストアンサー

①idにart_content、science_content、math_contentを持つ要素を、querySelectorAllで取得
②取得した要素の大きさ分繰り返し文(for)で回す
③それぞれの要素に対して、質問文のコードの共通部分を適用させる

ざっくり以下のようなイメージ

JavaScript
1var list = document.querySelectorAll(/*三つのID要素を取得するためのセレクタ*/);
2
3for(var i=0;i<list.length;i++){
4//共通処理
5}

投稿2019/02/15 05:00

編集2019/02/15 05:00

madoka9393

総合スコア992

退会済みユーザー

2019/02/15 05:05

似たようなことを以前やったのですが、on clickがnullになってしまいます... var content =document.querySelectorAll("dt"); for(var i=0;i<content.length;i++){ document.getElementById("#art").onclick=function(e){ var str = document.getElementById("art_content"); if(str.style.display == "none"){ str.style.display="block"; }else{ str.style.display="none"; } } }

madoka9393

2019/02/15 05:08

getElementById()で取るなら「#」は不要では (そしてこの記述では「art」及び「art_content」にしかきかないのでは)

退会済みユーザー

2019/02/15 05:10

すみません、わかりやすくartにだけ分けてやりました... #不要なのですね、いると思ってました。わからないことばかりで本当に申し訳ないです。

madoka9393

2019/02/15 05:15

こちらこそ真意を読み取れず申し訳ないです。＞# 仮に必要だとすれば質問文のコードでも#付与してないと動作しませんよね。 MDN | Document.getElementById() https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById 「$('#art')」のように「$」を使用する場合には必要になりますが。

退会済みユーザー

2019/02/15 05:45 編集

madoka9393さんのコードで動きました！！ありがとうございます！

madoka9393

2019/02/15 05:41

(papinianus 様の回答ではなく…！？) (他の回答者様と比べてほぼコード書いてないしこんなのがBAでいいのだろうか…。)

退会済みユーザー

2019/02/15 05:45

papinianusさんのコードでも正常に動作したのですが、如何せん私には複雑で... パッとわかりやすかったmadoka9393さんのコードを選ばせていただきました。もっと詳しくわかる方でしたら、papinianusさんのコードの方がいいのかもしれないのですが。。

madoka9393

2019/02/15 05:52

こちらとしては無理やり「querySelectorAll」と「for」を使う例として出しただけなので…。とりあえずうまいこといっているのでしたらまぁよかったです。