【連載】CPIエバンジェリストのお悩み相談室④
JavaScriptでクリックした要素を検出し、classを付与する方法（前編）
©StockUnlimited
今回は、ボタンをクリックした後に、activeのclassを付与する方法を解説します。サンプルコードも載せているので、Step by Stepで学んで行きましょう！
・ Eventlistnerを使ったイベントの処理
・ classListを使ったクラスの追加と削除
・ DOMの基礎
［生徒からの質問］
ボタンを3つの並べた状態で、ボタンをクリックした後にactive classを付けたいです。今、ボタン1にactiveが付与されている状態でボタン2をクリックすると、1と2の両方がactiveになってしまいます。ボタン2だけをactiveにするにはどうすればよいですか？
■補足：ボタン1にclassを付けることと、再度クリックしたときにそのclassを外すことは出来ている
3つ並べたボタンのイメージ
という質問に対して、
［私の回答］
押された以外のボタンに対して、activeが付いているかチェックし、付いていたら外せばいいんじゃない？
［生徒からの質問］
それができたら質問していないですよね……。
［私の回答］
たしかに！ 一回ソースコードを見せてください。
というわけで、その生徒が書いたソースコードはこちらです。buttonタグに、クラスbtn1からbtn3をつけています。
［生徒が記述したソースコード］
01 ＜button class="btn1"＞ボタン１＜/button＞
02 ＜button class="btn2"＞ボタン2＜/button＞
03 ＜button class="btn3"＞ボタン3＜/button＞
04 ＜script>
05 $(function(){
06 $('.btn1').on("click", function(){
07 if ($('.btn1').hasClass('active')) {
08 $('.btn1').removeClass('active');
09 } else {
10 $('.btn1').addClass('active');
11 }
12 });
13 });
14 ＜/script＞
このままソースコードを使うのであれば、btn1 のクリック検出時に、$('.btn2').removeClass('active'); 、 $('.btn3).removeClass('active'); の処理を追加することで動作します。
しかし、下記の理由からソースコードを1から作り直すことにしました。
［理由］
①各ボタンのclass名を変えないと動作しない
②ボタンの増減時にJavaScriptを書き変えないといけない
③jQueryを使ったコードが記述されている（レスポンスを考えるとネイティブで記述する方が望ましい）
まず初めに今回の完成系を見てみましょう。今回のゴールです。
こちらのサンプルコードで動作を確認できます。
url. http://shared-blog.kddi-web.com/sandbox/javascript/click/
［仕様はこちら］
●ボタンをクリックすると、activeクラスが付与される
●クリックしたボタンにactiveクラスがついている場合は削除
●クリックしたボタン以外に、activeクラスが付いている場合はクラスを削除
まず、HTMLとCSSを用意します。
＜!DOCTYPE html＞
＜html＞
＜head＞
＜title＞TEST＜/title＞
＜meta charset="UTF-8"＞
＜style type="text/css"＞
.btn{
width: 200px;
height: 30px;
margin: 5px;
outline: none;
}
.active{
background-color: #666;
}
＜/style＞
＜/head＞
＜body＞
＜button class="btn"＞ボタン１＜/button＞
＜button class="btn"＞ボタン2＜/button＞
＜button class="btn"＞ボタン3＜/button＞
＜/body＞
＜/html＞
●JavaScriptでの実装
■Step1:
＜button＞がクリックされたイベントを取得します。クリックイベントは、addEventListenerで取得します。書式は下記の通りです。
●参考：Mozilla Developer Network
url. https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
構文：
target.addEventListener(type, listener[, options]);
type：
イベントの種類（click、mouseorverなど）
url. https://developer.mozilla.org/en-US/docs/Web/Events listener
オブジェクトか関数を指定
まず btn クラスが付与されたDOM要素を取得し、正しく取得できたかコンソール画面に出力します。
var btn = document.getElementsByClassName(‘btn’);
console.dir(btn);
＜/script＞
btnクラスが付与されたDOMを取得できました。今回は3つボタンを設置していますので[0]、[1]、[2]の3要素を取得することができました。この取得したDOMに対して、EventListenerを登録し、クリック時の動作を付けていきます。
var btn = document.getElementsByClassName('btn');
btn[0].addEventListener("click", function(){
console.log('クリックされました');
});
＜/script＞
しかし、上記方法ではボタンの数が増えたり減ったりした場合にJavaScriptのコードを書き換える必要がでてくるので、手間になってしまいます。そこで下記のように、for文を使い、ボタンの個数分ループをし、イベントリスナーに登録します。
// ボタンのDOM要素を取得
var btn = document.getElementsByClassName('btn');
// ボタンの個数分ループ
// 変数「i」に現在のループ回数が代入される
for (var i = btn.length - 1; i >= 0; i--) {
// 各ボタンをイベントリスナーに登録
btn[i].addEventListener("click", function(){
console.log('クリックされました');
});
}
＜/script＞
クリックしたボタンにactiveクラスを追加、再度クリックでactiveクラスを削除します。クラスの追加や削除はDOM要素のclassListを使います。また、classListには便利なメソッドあります。
・add: クラスの追加
・remove: クラスの削除
・toggle: クラスが付いていたら削除、付いていなかったら追加
・contains: 特定のクラスが含まれているか確認
url. https://developer.mozilla.org/ja/docs/Web/API/Element/classList
// ボタンのDOM要素を取得
var btn = document.getElementsByClassName('btn');
// ボタンの個数分ループ
// 変数「i」に現在のループ回数が代入される
for (var i = btn.length - 1; i >= 0; i--) {
// 各ボタンをイベントリスナーに登録
btn[i].addEventListener("click", function(){
// activeクラスの追加と削除
// thisは、クリックされたオブジェクト
this.classList.toggle('active');
});
}
＜/script＞
次に、クリックしたボタン以外にactiveクラスが付いていた場合、クラスを削除する方法をご紹介したいと思いますが、記事が長くなってきましたので、また次回でご紹介します。
［筆者プロフィール］
阿部 正幸（あべ まさゆき） | KDDIウェブコミュニケーションズ／エバンジェリスト
システム開発会社で大規模なシステム開発を経験後、Web制作会社でプログラマー兼ディレクターとして従事。その後、KDDIウェブコミュニケーションズに入社、レンタルサーバーCPIのプロダクトマネージャーに就任。ACE01、SmartReleaseをリリース後、現職の「エバンジェリスト」としてWeb制作に関する様々なイベントに登壇。Drupal（g.d.o Japan）日本コミュニティー、HTML5 funなどに所属し、OSSを世に広げる活動やWeb制作に関する情報を発信している。
●CPIスタッフブログ
URL:http://shared-blog.kddi-web.com/
● CPI LINE@のご案内
http://shared-blog.kddi-web.
