.classList.toggle()

JavaScriptの.classList.toggleでクリックしたボタンを識別して表示の切り替え

2022年2月25日2022年3月22日 3分

複数のボタンを設置して、どれかのボタンクリックで表示を切り替える時に、そのボタンを「ON」にする表示をネイティブのJavaScriptで書いてみます。

.classList.toggle()と.classList.remove()
- .classList.toggle()
- .classList.remove()
クリックで表示が切り替わるサンプル
サンプルのコード

.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; を付与してクリックしないようにしています。