Warning: Undefined array key 3 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 18
Warning: Undefined array key 4 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21
Warning: Undefined array key 3 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 30
Warning: Undefined array key 4 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33
複数のボタンを設置して、どれかのボタンクリックで表示を切り替える時に、そのボタンを「ON」にする表示をネイティブのJavaScriptで書いてみます。
.classList.toggle()と.classList.remove()
この記事では、ループの中で .classList.toggle() と .classList.remove() を使い、class名を切り替えます。この2つについて解説します。
.classList.toggle()
.classList.toggle() は、classを追加・削除をON・OFFを切り替えるメソッドです。
Element.classList.toggle('class名');classを切り替えるのにも簡単で便利なメソッドです。
.classList.remove()
.classList.toggle() は、上述の通り classを追加・削除をON・OFFのトグルで切り替えるメソッドですが、.classList.remove() は指定したclass名を削除します。
Element.classList.remove('削除するclass名');
複数指定の場合は 'test1', 'test2' のように「,」で区切ります。jQueryのように半角スペースで指定するとエラーが出ます。
クリックで表示が切り替わるサンプル
早速サンプルですが、ボタンをクリックするとそのボタンの表示が都度切り替わります。
この記事のスニペットではボタンの表示だけ切り替わりますが、クリックイベントでボタン以外の要素を切り替える時。例えば、ボタンクリックでコンテンツの表示を切り替える時、有効になっているものを可視化させる時に使います。
サンプルのコード
コードは、HTML・JavaScript・CSSの3種類です。順に解説していきます。
HTML
HTMLは、nav タグで親を作り、その中に button タグを6つ作っています。
<nav class="changeButton">
<button class="btnToggle activeOn">ボタンその1</button>
<button class="btnToggle">ボタンその2</button>
<button class="btnToggle">ボタンその3</button>
<button class="btnToggle">ボタンその4</button>
<button class="btnToggle">ボタンその5</button>
<button class="btnToggle">ボタンその6</button>
</nav>ボタンのclass名には、JavaScriptのトリガーになる「btnToggle」のclass名をつけ、ページ表示をした時に最初のボタンがONになるよう、1個目のボタンだけに「activeOn」をつけています。
親は nav タグじゃなく、div タグでも問題ありません。
JavaScript
JavaScriptは、「btnToggle」のclassが付いた button タグを取得して、for文のループでクリックしたボタンに .classList.toggle で「activeOn」のclassを付けます。
const btn = document.getElementsByClassName('btnToggle');
for (var i = btn.length - 1; i >= 0; i--) {
btnAction(btn[i],i);
}
// activeOnを付ける
function btnAction(btnDOM,btnId){
btnDOM.addEventListener("click", function(){
this.classList.toggle('activeOn');
// activeOnを全て外す
for (var i = btn.length - 1; i >= 0; i--) {
if(btnId !== i){
if(btn[i].classList.contains('activeOn')){
btn[i].classList.remove('activeOn');
}
}
}
})
}そして、もう一回for文のループで元々「activeOn」のclassが付いているボタンから、.classList.remove で「activeOn」のclassをボタンから外します。
for文では、ボタンの数分だけループが回るよう .length で要素（ボタン）の数を取得しています。
CSS
CSSは、Flexboxでボタンを並べる記述と、ボタンクリックでボタンの色を変える記述のみです。
nav.changeButton {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-start;
}
nav.changeButton button {
display: inline-block;
}
/* ボタンクリック後 */
button.btnToggle.activeOn {
background: #545454;
color: #f0db40;
pointer-events: none;
}ボタンクリックで「activeOn」のclass名がついたら、再度そのボタンを選択できないよう pointer-events: none; を付与してクリックしないようにしています。
