jQuery 入門 ①

<button class="click-button">Click!!</button>
<script>
  $(".click-button").click(function () {
    $(this).css("background-color", "lightblue");
  });
</script>

click-button クラスに対して Click イベントを設定しています。
上記のソースコードでは、一方通行で一回限りのイベントですね。

さて、一回限りのイベントでは、モーダルウィンドウの表示やスライドの切り替えに利用することができません。
モーダルウィンドウは開いたり閉じたり、スライドは一つのボタンで何度もスライドの切り替えを行わなければならないからです。
そこで、今回は if文 とメソッドを活用して、イベントの発火が繰り返し行えるようにします。

<button class="click-button">Click!!</button>
<script>
  $(".click-button").click(function () {
    if ($(this).hasClass("color-blue")) {
      $(this).removeClass("color-blue");
      $(this).css("background-color", "");
    } else {
      $(this).addClass("color-blue");
      $(this).css("background-color", "lightblue");
    }
  });
</script>

一方通行ではなく、ピンクボタンとブルーボタンを繰り返し切り替えができるようになりました。
今回のサンプルでは以下の形で実装を行っています。

(3-4行目) クリックしたボタンに click-button クラスがあるかないかを length プロパティで取得する。
(5-6行目) click-button クラスがある場合は、removeClass メソッドで click-button クラスを削除して、css メソッドでボタンの色をピンクにする。
(7-9行目) click-button クラスがない場合は、addClass メソッドで click-button クラスを追加して、css メソッドでボタンの色をブルーにする。

▶ その他のクリック系イベント

次は hover イベントの予定です。

システム開発Gr. AS