jQueryを使うとHTMLやCSSだけでは実現できないような動きをサイトに付けることができます。
今回は例としてボタンクリックされた時に「CSSのクラスを追加」もう一度クリックすると「CSSクラスを削除」する処理をjQueryで実現してみようと思います。
追加するCSSクラスは分かりやすいように、背景が赤色になる「red」というクラスを作ります。
ボタンをクリックするとボタンが赤色に、もう一度クリックすると元の色に戻るという動きです。
この動きを応用していくと、動的でリッチなサイトを制作できるようになります。
HTML（ CSSクラスの追加と削除）
まずはjQueryの参照をしてください。
ダウンロードしたものを参照しても、CDNを参照してもOKです。
後はボタンを用意しましょう。
|
1 2 3 4 5 6 7 8 9 10 |
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <div class="container"> <div class="row"> <div class="col"> <p class="info">下のボタンをクリックしてください</p> <button class="target">ボタン</button> </div> </div> </div> |
jQueryで操作をしやすくするためにボタンには「target」というクラスをあらかじめ追加しています。
HTMLはこれでOKです。
スクリプト（CSSクラスの追加と削除）
スクリプト側は次のような記述になります。
|
1 2 3 4 5 6 7 8 9 |
$(function(){ $(".target").click(function(){ if(!$(this).hasClass('red')) { $(this).addClass('red'); } else { $(this).removeClass('red'); } }); }); |
[ 2行目 ]
「target」クラスを持っている要素がクリックされたときの処理のイベントを記述しています。
「target」クラスを持っているのはボタンになりますので、ボタンがクリックされた時にこの関数が呼び出されるイメージに近いですね。
[ 3行目 ]
どのプログラムでもおなじみの条件分岐「if」です。
「hasClass」という関数は引数のクラスがその要素に含まれているかを確認する関数です。
はじめに付いている「!」は否定の意味になります。
まとめると「 “target” クラスを持っている要素に “red” クラスが含まれていなければ正」というif文になります。
[ 4行目 ]
「addClass」関数は引数の「クラスを追加する」という関数です。
「上記if文が正の場合は “target” クラスを持っている要素に “red” クラスを追加する」という意味になります。
[ 6行目 ]
上記if文にマッチしない時の処理です。
if文にマッチしない場合「”target”クラスを持っている要素から “red”クラスを削除する」という意味になります。
簡単ですね！
サンプルも作成しています。
