指定クラスを持つ要素の表示/非表示の切り替えを行いたい
■改善点
- 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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/03/07 20:01
2023/03/07 20:58