jQueryの基礎：クラスを付与or解除する

サンプルはこちら

See the Pen Basics of jQuery by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

テキストクリックでそれぞれ異なる動作をしています。

HTML

<p class="p1">「addClass」はクラスを付与するだけ。</p>
<p class="p2 red">「removedClass」はクラスを付与するだけ。</p>
<p class="p3">「toggleClass」はクラスを付け外しする。</p>

p2にだけ最初から、文字を赤くするだけのクラス「red」を付与しています。

JavaScript

$(function () {

  //p1クリックでredを付与
  $(".p1").click(function(){
    $(this).addClass("red");
  });

  //p2クリックでredを除去
  $(".p2").click(function(){
    $(this).removeClass("red");
  });

  //p3クリックでredをトグル
  $(".p3").click(function(){
    $(this).toggleClass("red");
  });

});

今回は下記3つのjQuery関数を使っています。

.addClass();
.removeClass();
.toggleClass();

それぞれ指定したクラス名の付与や除去を行うクラスです。

addClassは付与するのみ、removeClassは除去するのみで、toggleClassは指定したクラスの有無を判別し、付与や除去を行ってくれます。