jQuery 「CSS操作」クラスの指定あり・指定なしを切り替える

.addClassメソッドはクラスを追加し、.removeClass()メソッドはクラスを削除するメソッドですが、.toggleClass()メソッドは、引数として渡したクラスが要素に指定されていなければ指定し、指定されていれば除去します。ただし、2番目の書式のように、第２引数のスィッチ（trueまたはfalse）を使って、指定したクラスの有効・無効を明示的に設定することもできます。jQuery1.4からは、クラス名の指定をクロージャで動的に生成できるようになりました。条件によって切り替えるクラス名を変化させられるので、非常に柔軟なスタイル指定が可能です。

書式

$( 対象要素 ).toggleClass('クラス名');
$( 対象要素 ).toggleClass('クラス名',スィッチ);
$( 対象要素 ).toggleClass(function(){処理・・・});

$('p').toggleClass('myClass');
$('p').toggleClass('myClass',true);
$('p').toggleClass(function(){
    if(x == y){
      return 'myClass';
    }else{
      return 'yourClass';
    }
});

サンプル

ボタンクリックでクラス指定の有効・無効を切り替える

<html>
      <head>
        <meta charset="UTF-8">
        <title>テストページ</title>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <style>
          .btn{
            border: 1px solid;
            font-size:15px;
            background: #fff;
          }
          .bgcolor {
            background:#f0b8ff;
          }
        </style>
  </head>
  <body>
    <form>
      <input type="button" class="btn bgcolor" value="toggle!">
      <input type="button" class="btn" value="toggle!">
      <input type="button" class="btn" value="toggle!">
    </form>
    <script>
      $('.btn').on('click',function(){
        $(this).toggleClass('bgcolor');
       });
    </script>
    </body>  
</html>

サンプルでは、1つ目のボタンにはすでにbgcolorクラスが付与されている状態になるため、クリックすると.toggleClass()メソッドによってbgcolorクラスが外されます。

カテゴリー:CSS操作JavaScriptjQuery