macoblog

「ゲーム × プログラミング」で生きていく

MMORPGに人生捧げてみ?

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

JavaScript プログラミング

「クリックすることでONとOFFを切り替えるにはどうしたらいい」こんな疑問に答えます。

プログラミングの勉強としてjQueryを触る方も多いということで、jQueryでよく使われるクリック処理について解説しています。

「クリックすることでONとOFFを切り替えられるようにしたい」jQueryでは容易に行えます。

例えばこんなボタン、正確にはリストですがよく見かけると思います。

ONとOFFが切り替わるボタン(リスト)

要素に状態を与える手法としてはクラス付与で操作するのがメジャーです。

上記の例であれば、ボタンAに「active」というクラスを付与することでそれを可能にしています。

百聞は一見に如かず、コードを見てみましょう。

コピペすればすぐ使えますので試してみてもらっても大丈夫です。

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

HTMLはこんな感じ。

<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を分けるには

jQueryでクリックした時に「active」クラスを付与する処理を書けばいい

ということになります。

それではjQuery側の処理を見ていきましょう。

スポンサードサーチ


jQueryクリックイベントでクラスを付与する方法

jQueryを使用しますのでhead内で下記を読み込んでおいてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

クリックイベント自体基礎的なものなので難しいことは一切しません。

jQueryを初めて触る人でも簡単にできます。

前述したHTMLコードを参考にクリックイベントを書いてみます、下記になります。

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

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

2行目が処理です、クリックした要素にクラスactiveを付与します、対象の要素になければ付与、あれば付与しません。

コピペして試してみてください。

全部にクラスactiveが付いてしまう問題

先ほどのコードだとクリックしてONの状態にはできるけど、OFFにならないという問題が出てきます。

こんな感じに

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

見事に全部が真っ赤っ赤、全てクリックするとこうなります。

理想としては、

ボタンAがONの状態でボタンBをクリックすると、ボタンAはOFFになりボタンBがONになる

これを実装するにはひと手間加えるだけでOKです。

そのひと手間とは?プログラミングを勉強しているとよく聞きますよね、そう初期化です。

今回であればクリックした際に一旦クラスを初期化してあげれば上手くいきます。

下記のようにしましょう。

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

2行目がポイントです、activeクラス付与の処理をする前に、btnクラスを含む要素からactiveクラスを消去しています。

こうすることでイメージしていた処理になったかと思います、お試しください。

終わりに

プログラミングの感覚を掴むことが大切です。

jQueryの活躍の場は広く様々です、今回は基本中の基本であるクリックイベントについて解説してみました。

「プログラミングって難しいな」と感じている方は、まずここから試してみるのもいいかもしれません。

いきなり高度な事をしようとすると挫折してしまいますからね、恥ずかしながらソースは自分。

最初は動かして楽しさを実感する事から始めましょう!!

そんなところで、プログラミングを始めよう!という方向けにわかりやすい記事をこれからも発信していけたらなと思います。

Twitterでも情報を発信していますのでフォローよろしくお願いします。

以上になります。