jQueryでクリックするとclassを追加／削除するボタンを作成する方法

2024.03.21
Tips

jQueryの「addClass()」「removeClass()」「toggleClass()」を使用して、クリックすると任意の要素にクラスをつけたり、外すことのできるボタンの実装方法の備忘録です。

クラスを追加する

「addClass()」を使用すると、任意の要素にclass属性を追加することができます。

テキストに「ブルー」クラスを追加

ボタンを押すと隣のテキストに「blue」クラスを追加して、文字の色を変化させるコードサンプルです。

HTML

<button class="btn">addClass</button>
<p class="text-add">テキストに「ブルー」クラスを追加</p>

ボタンとテキスト部分のHTMLコードの抜粋です。

「addClass」ボタンを構成している<button>タグに「btn」クラスを設定し、テキスト部分に「text-add」クラスを設定しています。

CSS

.blue {
  color: #008ee1;
}
.btn {
  display: block;
  color: #fff;
  background: #333;
  font-weight: bold;
  width: 160px;
  height: 60px;
  border-radius: 12px;
  cursor: pointer;
}
.btn:hover {
  opacity: .6;
  transition: .3s;
}
p {
  font-size: 20px;
  font-weight: bold;
}

CSSのサンプルです。青色に変化させるための「blue」クラスとボタンの設定です。余白やレイアウトのコードは割愛しています。

$(function () {
  $('.btn').on('click', function () {
    $('.text-add').addClass('blue');
  });
});

on('click', function ()で、「btn」クラスのついた要素をクリックすると、addClass('blue')で「text-add」クラスのついた要素に「blue」クラスが追加されるように設定しています。

「addClass」ボタンをクリックすると、下記のコードのようにクラスが追加され、テキストの色が変化します。

<p class="text-add blue">テキストに「ブルー」クラスを追加</p>

ちなみに、リセットボタンは下記の「removeClass()」を使用して作成しています。

クラスを削除する

「removeClass()」は、任意の要素の特定のclass属性を削除することができます。

テキストから「ブルー」クラスを削除

ボタンを押すと隣のテキストの「blue」クラスを削除して、文字の色を黒に戻すコードサンプルです。

HTML

<button class="btn">removeClass</button>
<p class="text-remove blue">テキストから「ブルー」クラスを削除</p>

ボタンとテキスト部分のHTMLコードの抜粋です。テキスト部分には「blue」クラスが設定されています。

CSSは、上記のコードと同様です。

$(function () {
  $('.btn').on('click', function () {
    $('.text-remove').removeClass('blue');
  });
});

「btn」クラスのついた要素をクリックすると、removeClass('blue')で「text-remove」クラスのついた要素から「blue」クラスを削除しています。

クラスを追加／削除する

addClass()は基本的にclass属性の追加だけでしたが、toggleClass()は追加と削除の両方を実行することができます。

ボタンを押すと隣のテキストに「blue」クラスを付け外しして、文字の色を切り替えるコードサンプルです。

テキストの「ブルー」クラスを付け外す

HTML

<button class="btn">toggleClass</button>
<p class="text-toggle">テキストの「ブルー」クラスを付け外す</p>

ボタンとテキスト部分のHTMLコードの抜粋です。こちらもCSSは、上記のコードと同様です。

$(function () {
  $('.btn').on('click', function () {
    $('.text-toggle').toggleClass('blue');
  });
});

「btn」クラスのついた要素をクリックすると、toggleClass('blue')で「text-toggle」クラスのついた要素の「blue」クラスが切り替わります。

toggleClass()は、対象となる要素に指定したclass属性があれば「削除」、無ければ「追加」するため、addClass()とremoveClass()の機能を一つで実装することが可能です。

一つのクラスでオンオフの機能を実装する場合に活用できます。