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は指定したクラスの有無を判別し、付与や除去を行ってくれます。

AWSを利用した導入事例のご紹介

実際に構築を行ったAWSの事例を紹介しています。導入の目的に近い事例をご覧いただくと、実際の構成例やメリット、注意点などが把握できます。

ブックオフコーポレーション株式会社様
第一生命保険株式会社様
株式会社電通様
株式会社LIFULL様
株式会社リブセンス様
TBSアナウンス部様
明治大学様
拓殖大学様