ボタンをクリックしたときのjQueryメモ

   

自分用覚書です。

イベントメソッドのブックマーク

参考：イベントに応じて処理を実行するには？（イベントメソッド）

クラスを付けたり消したりする際に利用するのはtoggleClass

参考：toggleClass(class)

指定した要素から、CSSクラスを削除するにはremoveClass

参考：removeClass(class)

ボタンAをクリックしたときにactiveクラスを追加して、
ボタンBをクリックしたときにactiveクラスを追加して且つボタンAのactiveクラスを削除する…みたいな
this以外の動きもjQueryで制御？できるメモ。

ボタンの設定

<input type="button" class="btn-A" value="A">
<input type="button" class="btn-B" value="B">
<input type="button" class="btn-C" value="C">
<input type="button" class="btn-D" value="D">

jQuery側

$('[class^="btn-"]').on("click",function(){ 
   $(this).toggleClass('active'); //this
   var self = $(this);
   $('[class^="btn-"]').not(self).removeClass('active'); //this以外
})

参考：jQuery $(this)以外のセレクタの指定方法

 - jQuery