質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.83%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

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

Kosketu
Kosketu

総合スコア46

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0グッド

0クリップ

323閲覧

投稿2023/03/07 15:18

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

■改善点

  • 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

1

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

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🎉を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

Kosketu

2023/03/07 20:01

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

2023/03/07 20:58

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

1

ベストアンサー

できるだけ元の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>

投稿2023/03/07 18:16

YakumoSaki

総合スコア2027

Kosketu❤️を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

Kosketu

2023/03/07 19:59

ありがとうございます!!しっかりと解決できました!! またご機会あれば、ご指南のほどお願いいたします🙇

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.83%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。