【jQuery】クリックで状態が切り替わるボタンを実装する【初心者向け】

この記事では、jQueryを使ってクリックする事で状態を切り替える方法について解説しています。クリックするとONとOFFが切り替わるようなボタンを作成したい時に参考になると思います、もちろん応用も可能です。

目次[ click ]

クリックで状態が切り替わるボタンの実装
①：使用するマークアップ
②：jQueryでクラスを付与する処理
③：完成コード

クリックで状態が切り替わるボタンの実装

ボタンをクリックするとONとOFFが切り替わるようなボタンを作りたい、そんな時はjQueryを使うことで簡単に実装することができます。例えばこんなボタン、正確にはリストですがよく見かけると思います。

ONとOFFが切り替わるボタン（リスト）

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;
}

activeクラスを用意してスタイルを済ませておきます、ついてにボタン（リスト）のスタイルも済ませておきましょう。

<ul class="btns">
  <li class="btn active">ボタンA</li>
  <li class="btn">ボタンB</li>
  <li class="btn">ボタンC</li>
</ul>

2行目のボタンA（リスト）のクラスにactiveが付いている事で、スタイルが適用され「ON」になっている様に見えるということですね。

つまり、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');
});

1行目で、クラスにbtnを含む要素にクリックイベントを付与します。
2行目で、クリックした要素にクラスactiveを付与します。

これでも動作はしますが、これだと下記のようにクリックしてONの状態にはできるけど、OFFにならないという問題が出てきます。

ONの状態にはできるけど、OFFにならないという問題

全てクリックすると全部がアクティブ状態で見事に真っ赤。ボタンAがONの状態でボタンBをクリックするとボタンAはOFFになりボタンBがONになるように実装したいので、一旦クラスを初期化する処理を挟むことにします。

先ほどの処理を下記のように変更してください。

$('.btn').on('click',function(){
  $('.btn').removeClass('active');
  $(this).addClass('active');
});

2行目がポイントです、activeクラスを付与の処理をする前に、btnクラスを含む全ての要素から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エンジニア

今回紹介したものは、WEB制作会社で働いているとよく使用するフロントのクリックイベント処理なので覚えておいて損はないと思います。ロジックを理解すれば流行りのVueとReactでも応用可能です。

無料体験が受けられるプログラミングスクール８社。現役エンジニアが厳選

本記事では、無料体験・体験カウンセリングを受けることが出来るおすすめのプログラミングスクール８社を現役のエンジニアが厳選…

macoblog.com