jQueryでエレガントにクラス操作！addClass、removeClass、toggleClassを使いこなすテクニック

2024-06-28

jQueryで複数のクラスを追加・削除する方法

このガイドでは、**addClass()とremoveClass()**メソッドを使用して、jQueryで複数のクラスを操作する方法について説明します。

複数のクラスを追加する

**addClass()**メソッドを使用して、要素に複数のクラスを同時に追加することができます。

$(selector).addClass("class1 class2 class3");

このコードは、selector で選択されたすべての要素に class1、class2、class3 というクラスを追加します。

スペースで区切られたクラス名を引数として渡すことで、複数のクラスを同時に追加できます。

複数のクラスを削除する

$(selector).removeClass("class1 class2 class3");

特定の条件下でのクラスの追加・削除

addClass()とremoveClass()メソッドは、条件分岐を使用して、特定の条件下でのみクラスを追加・削除することができます。

例えば、以下のようなコードは、ボタンがクリックされたときに要素に active クラスを追加します。

$("button").click(function() {
  $(this).addClass("active");
});

このコードは、button 要素がクリックされたときに、その要素自身に active クラスを追加します。

jQueryを使用すると、要素に対して簡単にクラスを追加・削除することができます。

HTML

<!DOCTYPE html>
<html>
<head>
  <title>jQueryクラス操作</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // ボタンクリック時にクラスを追加
      $("button").click(function() {
        $(this).addClass("active");
      });

      // 5秒後にクラスを削除
      setTimeout(function() {
        $("button").removeClass("active");
      }, 5000);
    });
  </script>
</head>
<body>
  <button class="button">ボタン</button>
</body>
</html>

説明

このコードは、以下のことを行います。

jQueryライブラリの読み込み: <script> タグを使用して、jQueryライブラリを読み込みます。
document ready イベントハンドラ: $(document).ready(function() { ... }) 内のコードは、ドキュメントが読み込まれてDOMが構築された後に実行されます。
ボタンクリックイベントハンドラ: $("button").click(function() { ... }) 内のコードは、ボタンがクリックされたときに実行されます。
- このハンドラは、$(this) を使用してクリックされたボタンにアクセスし、addClass("active") メソッドを使用して active クラスを追加します。
setTimeout(): setTimeout(function() { ... }, 5000) は、5秒後に非同期的に関数を実行します。
- この関数内では、$("button").removeClass("active") メソッドを使用して、すべてのボタンから active クラスを削除します。

このコードを実行すると、ボタンをクリックすると active クラスが追加され、5秒後に削除されます。

このコードは、addClass() と removeClass() メソッドを組み合わせて、要素にクラスを動的に追加・削除する方法を示す基本的な例です。

以下のコードは、その他の addClass() と removeClass() メソッドの使い方を示しています。

特定の要素にのみクラスを追加する: $("p.intro").addClass("important") は、p 要素のうち、intro クラスを持つ要素のみに important クラスを追加します。
条件に応じてクラスを追加・削除する: if ($(this).hasClass("error")) { $(this).removeClass("error").addClass("success"); } は、要素に error クラスがある場合は error クラスを削除し、success クラスを追加します。
すべてのクラスを削除する: $("button").removeClass() は、すべてのボタンからすべてのクラスを削除します。

これらの例を参考に、jQueryを使用して要素のクラスを操作する方法を自由に試してみてください。

jQueryで複数のクラスを追加・削除するその他の方法

スプレッド構文を使用すると、addClass()とremoveClass()メソッドに配列を直接渡すことができます。

$(selector).addClass(["class1", "class2", "class3"]);
$(selector).removeClass(["class1", "class2", "class3"]);

この方法は、特に多くのクラスを追加・削除する場合に便利です。

.toggleClass()メソッドは、要素に特定のクラスがある場合は削除し、ない場合は追加します。

$(selector).toggleClass("class1 class2 class3");

この方法は、要素に特定のクラスがあるかどうかを判定する必要がない場合に便利です。

.attr()メソッドを使用して、class 属性を直接操作することもできます。

$(selector).attr("class", "class1 class2 class3");
$(selector).attr("class", ""); // すべてのクラスを削除

この方法は、より低レベルな方法ですが、柔軟性とコントロール性に優れています。

カスタムメソッドを使用する

独自のニーズに合わせて、カスタムメソッドを作成することもできます。

function addMultipleClasses(selector, classes) {
  $(selector).each(function() {
    $(this).addClass(classes.join(" "));
  });
}

function removeMultipleClasses(selector, classes) {
  $(selector).each(function() {
    $(this).removeClass(classes.join(" "));
  });
}