jQuery ToggleClass：使いこなせればWebデザインがもっと楽しくなる

2024-05-21

jQueryで2つのクラスをトグルする方法：最も簡単な方法

toggleClass() メソッドは、要素に指定されたクラスが存在する場合は削除し、存在しない場合は追加します。これは、2つのクラスをトグルする最も簡単な方法です。

$(element).toggleClass('class1 class2');

このコードは、要素に class1 クラスが存在する場合は削除し、存在しない場合は追加します。要素に class2 クラスが存在する場合は削除し、存在しない場合は追加します。

hasClass() と addClass()/removeClass() メソッドを組み合わせる

hasClass() メソッドは、要素に特定のクラスが存在するかどうかを確認するために使用できます。addClass() メソッドは要素にクラスを追加するために使用でき、removeClass() メソッドは要素からクラスを削除するために使用できます。

if ($(element).hasClass('class1')) {
  $(element).removeClass('class1').addClass('class2');
} else {
  $(element).removeClass('class2').addClass('class1');
}

このコードは、要素に class1 クラスが存在する場合は class1 クラスを削除し、class2 クラスを追加します。要素に class1 クラスが存在しない場合は、class2 クラスを削除し、class1 クラスを追加します。

attr('class') 属性を使用して、要素のクラス属性を直接操作することもできます。ただし、この方法は非推奨であり、toggleClass() メソッドまたは hasClass()/addClass()/removeClass() メソッドを使用する方が一般的です。

var classes = $(element).attr('class');

if (classes.indexOf('class1') !== -1) {
  classes = classes.replace('class1', 'class2');
} else {
  classes += ' class1';
}

$(element).attr('class', classes);

一般的には、toggleClass() メソッドを使用するのが最も簡単で効率的です。hasClass()/addClass()/removeClass() メソッドを使用する場合は、コードが少し長くなりますが、より多くの制御が可能になります。attr('class') 属性を直接操作する方法は、非推奨であり、避けるべきです。

補足:

上記の例では、2つのクラスのみをトグルする方法を示しています。複数のクラスをトグルする場合は、コードを適宜変更する必要があります。
jQueryの最新バージョンを使用していることを確認してください。古いバージョンの jQuery では、一部のメソッドが利用できない場合があります。

jQueryで2つのクラスをトグルするサンプルコード

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Toggle Class Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#button').click(function() {
        $(this).toggleClass('active inactive');
      });
    });
  </script>
</head>
<body>
  <button id="button">Toggle Class</button>
</body>
</html>

説明:

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

$(document).ready() 関数は、DOMがロードされたら実行される関数を定義します。
$('#button').click(function() { ... }); は、#button 要素がクリックされたときに実行される関数を定義します。
$(this).toggleClass('active inactive'); は、#button 要素に active クラスが存在する場合は削除し、存在しない場合は追加します。要素に inactive クラスが存在する場合は削除し、存在しない場合は追加します。

動作:

このコードを実行すると、ボタンが表示されます。ボタンをクリックすると、クラス active と inactive がトグルされます。つまり、ボタンをクリックするたびに、ボタンのスタイルが変更されます。

バリエーション:

このコードを次のように変更して、さまざまな効果を実現することができます。

異なるクラス名を使用する
アニメーションを追加する
複数の要素にクラスをトグルする

例:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Toggle Class Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#button').click(function() {
        $(this).toggleClass('red green');
      });
    });
  </script>
</head>
<body>
  <button id="button">Toggle Class</button>
</body>
</html>

このコードは、#button 要素に red クラスと green クラスをトグルします。つまり、ボタンをクリックするたびに、ボタンの色が赤と緑の間で切り替わります。

このコードはあくまでも一例であり、ニーズに合わせて自由にカスタマイズできます。

jQueryで2つのクラスをトグルするその他の方法

この方法は、toggleClass() メソッドよりも冗長ですが、よりきめ細かい制御が可能です。

$(element).removeClass('class1').addClass('class2');
$(element).removeClass('class2').addClass('class1');

attr() メソッドを使用してクラス属性を直接操作する

この方法は、非推奨であり、避けるべきです。しかし、単純なケースでは有用な場合があります。

var classes = $(element).attr('class');

if (classes.indexOf('class1') !== -1) {
  classes = classes.replace('class1', 'class2');
} else {
  classes += ' class1';
}

$(element).attr('class', classes);

カスタム関数を使用する

独自のニーズに合わせたカスタム関数を作成することもできます。

function toggleClasses(element, class1, class2) {
  if ($(element).hasClass(class1)) {
    $(element).removeClass(class1).addClass(class2);
  } else {
    $(element).removeClass(class2).addClass(class1);
  }
}

この関数は、element 要素に class1 クラスと class2 クラスをトグルします。

状況に合わせて最適な方法を選択することが重要です。