指定クラスの表示/非表示の切り替えをしたい

指定クラスを持つ要素の表示/非表示の切り替えを行いたい

■改善点

2回目にボタンを押した時に初期表示にしたい（sample.js内のfor処理およびelse部分）

戻す処理はできますでしょうか？ご教授願います。

ソースコード

html
1<input type="button" onclick="remove(Z1)" style="width:70px;" value="Z1">
2<input type="button" onclick="remove(Z2)" style="width:70px;" value="Z2">
3<input type="button" onclick="remove(Z3)" style="width:70px;" value="Z3">
4<main id="main">
5        <article id="article">
6            <div class="points Z1"><h3>point1</h3></div>
7            <div class="points Z1"><h3>point2</h3></div>
8            <div class="points Z1"><h3>point3</h3></div>
9            <div class="points Z1"><h3>point4</h3></div>
10            <div class="points Z2"><h3>point5</h3></div>
11            <div class="points Z2"><h3>point6</h3></div>
12            <div class="points Z2"><h3>point7</h3></div>
13            <div class="points Z2"><h3>point8</h3></div>
14            <div class="points Z3"><h3>point9</h3>/div>
15            <div class="points Z3">h3>point10</h3></div>
16            <div class="points Z3"><h3>point11</h3></div>
17            <div class="points Z3"><h3>point12</h3></div>
18        </article>
19</main>

問題のソースコード

sample.js
1const Z1 = document.querySelectorAll('.Z1');
2const Z2 = document.querySelectorAll('.Z2');
3const Z3 = document.querySelectorAll('.Z3');
4const points = document.querySelectorAll('.points');
5
6
7const remove =(el)=>{
8    for(let i = 0; i < el.length; i++){
9        if(el[i].classList.contains('Z1')){
10            el[i].style.display='none';
11         }else{
12           el[i].style.display='';
13         }
14    }
15}

回答2件

ご質問の意図を間違って捉えていたらすみません。
一旦全部表示させてから、対象の要素のみ非表示にする方法はいかがでしょうか？

動作確認用サンプル：https://jsfiddle.net/tL09sh6e/

javascript
1const Z1 = document.querySelectorAll('.Z1');
2const Z2 = document.querySelectorAll('.Z2');
3const Z3 = document.querySelectorAll('.Z3');
4const points = document.querySelectorAll('.points');
5
6
7const remove = (elms) => {
8	// pointsクラスの要素全てのdisplayを初期化する（表示する）
9  points.forEach(point => point.style.display = '');
10  
11  // 対象の要素を全てdisplay: noneにする
12  elms.forEach(elm => elm.style.display = 'none');
13}

投稿2023/03/07 18:46

編集2023/03/07 18:48

Cocode

総合スコア2314

回答へのコメント

Kosketu

2023/03/07 20:01

ありがとうございます！！しっかりと解決できました！！ forEach文の記法が自分にとって革新でした！またご機会あれば、ご指南のほどお願いいたします🙇

Kosketu

2023/03/07 20:58

こちらの回答にいただいたコードを使用するようにいたしました！！もう一つのベストアンサーです。ありがとうございます！

ベストアンサー

できるだけ元のJavascriptを生かした形でやってみました。
ご参考になれば幸いです。
なお、 // X と書いた行を削除すると、Z2、Z3のボタンも動くようになります。

html
1<html>
2<body>
3<input type="button" onclick="remove(Z1)" style="width:70px;" value="Z1">
4<input type="button" onclick="remove(Z2)" style="width:70px;" value="Z2">
5<input type="button" onclick="remove(Z3)" style="width:70px;" value="Z3">
6<main id="main">
7        <article id="article">
8            <div class="points Z1"><h3>point1</h3></div>
9            <div class="points Z1"><h3>point2</h3></div>
10            <div class="points Z1"><h3>point3</h3></div>
11            <div class="points Z1"><h3>point4</h3></div>
12            <div class="points Z2"><h3>point5</h3></div>
13            <div class="points Z2"><h3>point6</h3></div>
14            <div class="points Z2"><h3>point7</h3></div>
15            <div class="points Z2"><h3>point8</h3></div>
16            <div class="points Z3"><h3>point9</h3></div>
17            <div class="points Z3"><h3>point10</h3></div>
18            <div class="points Z3"><h3>point11</h3></div>
19            <div class="points Z3"><h3>point12</h3></div>
20        </article>
21</main>
22<script>
23const Z1 = document.querySelectorAll('.Z1');
24const Z2 = document.querySelectorAll('.Z2');
25const Z3 = document.querySelectorAll('.Z3');
26const points = document.querySelectorAll('.points');
27
28const remove =(el)=>{
29    for(let i = 0; i < el.length; i++){
30        if(el[i].classList.contains('Z1')){  // X
31            if (el[i].style.display=='none') {
32                el[i].style.display=''; // 隠されていれば戻す
33            } else {
34                el[i].style.display='none'; // 表示されていれば隠す
35            }
36         }else{  // X
37           el[i].style.display='';  // X
38         } // X
39    }
40}
41</script>
42
43</body>
44</html>