【jQuery】クリックで状態が切り替わるボタンを実装する【初心者向け】
目次【本記事の内容】 [ click ]
クリックで状態が切り替わるボタンの実装
ボタンをクリックするとONとOFFが切り替わるようなボタンを作りたい、そんな時はjQueryを使うことで簡単に実装することができます。例えばこんなボタン、正確にはリストですがよく見かけると思います。
jQueryを使って要素に状態を与える手法としてはクラス付与で操作するのが一般的かと思います、上記の例であれば、ボタンAに「active」というクラスを付与することでそれを可能にしています。上記ボタンのマークアップは下記の通りです。
①：使用するマークアップ
/* ボタン(リスト)のスタイル */
.btn {
background-color: #fbafaf;
border-bottom: solid 2px #ca2c2c;
color: #fff;
display: inline-block;
font-size: 32px;
font-weight: bold;
margin-right: 15px;
padding: 5px 10px;
}
/* activeクラス */
.active {
background-color: #ff5555;
}<ul class="btns">
<li class="btn active">ボタンA</li>
<li class="btn">ボタンB</li>
<li class="btn">ボタンC</li>
</ul>つまり、ONとOFFを分けるにはクリックした時に「active」クラスを付与する処理をjQueryで書けばいいということになります。それではjQuery側の処理を見ていきましょう。
②：jQueryでクラスを付与する処理
jQueryを使用しますのでhead内に下記をコピペして読み込んでおいてください、今回は3系のjQueryを使用します（他のバージョンはこちら）
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>前述したHTMLコードを参考にクリックイベントを書いてみます、下記になります。
$('.btn').on('click',function(){
$(this).addClass('active');
});2行目で、クリックした要素にクラスactiveを付与します。
これでも動作はしますが、これだと下記のようにクリックしてONの状態にはできるけど、OFFにならないという問題が出てきます。
全てクリックすると全部がアクティブ状態で見事に真っ赤。ボタンAがONの状態でボタンBをクリックするとボタンAはOFFになりボタンBがONになるように実装したいので、一旦クラスを初期化する処理を挟むことにします。
先ほどの処理を下記のように変更してください。
$('.btn').on('click',function(){
$('.btn').removeClass('active');
$(this).addClass('active');
});③：完成コード
完成コードを下に載せておきますのでコピペして動かしてみてください。
index.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sample</title>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- style -->
<style>
/* ボタン(リスト)のスタイル */
.btn {
background-color: #fbafaf;
border-bottom: solid 2px #ca2c2c;
color: #fff;
display: inline-block;
font-size: 32px;
font-weight: bold;
margin-right: 15px;
padding: 5px 10px;
}
/* activeクラス */
.active {
background-color: #ff5555;
}
</style>
</head>
<body>
<ul class="btns">
<li class="btn active">ボタンA</li>
<li class="btn">ボタンB</li>
<li class="btn">ボタンC</li>
</ul>
<script>
// jQueryクリックイベント
$('.btn').on('click',function(){
$('.btn').removeClass('active');
$(this).addClass('active');
});
</script>
</body>
</html>
うぇぶとまと
今回紹介したものは、WEB制作会社で働いているとよく使用するフロントのクリックイベント処理なので覚えておいて損はないと思います。ロジックを理解すれば流行りのVueとReactでも応用可能です。
チャンネル登録はこちら
うぇぶとまと
YouTubeチャンネルでは日々の暮らしをVlog形式で発信しています！ブログよりブログらしい内容になっていますので是非見てみて下さい！