JqueryUI-クラスの切り替え

この章では、 toggleClass()メソッド。これは、操作に役立つ新しいクラスです。tokenClass()メソッドは、一致した要素のセット内の各要素から1つ以上のクラスを追加または削除します。

構文

jQueryUIのバージョン1.0で追加されました

ザ・ toggleClass() メソッドの基本的な構文は次のとおりです。

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )
シニア番号 パラメータと説明
1

className

これは文字列であり、追加、削除、または切り替えられるCSSクラス名またはクラス名のスペース区切りリストを表します。

2

switch

これはブール型であり、指定されている場合、toggleClass()メソッドはtrueの場合はクラスを追加し、falseの場合はクラスを削除します

3

duration

これは数値または文字列タイプであり、オプションで、低速、通常、高速、または効果の持続時間をミリ秒単位で提供します。省略した場合、animate()メソッドがデフォルトを決定します。デフォルト値は400です。

4

easing

animate()メソッドに渡されるイージング関数の名前。

5

complete

これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。

jQueryUIのバージョン1.9で追加されました

バージョン1.9では、このメソッドはオプションをサポートするようになりました。これにより、子孫要素もアニメーション化されます。

.toggleClass( className [, switch ] [, options ] )
シニア番号 パラメータと説明
1

className

これは文字列であり、追加、削除、または切り替えられるCSSクラス名またはクラス名のスペース区切りリストを表します。

2

switch

これはブール型であり、指定されている場合、toggleClass()メソッドはtrueの場合はクラスを追加し、falseの場合はクラスを削除します

3

options

これは、すべてのアニメーション設定を表します。すべてのプロパティはオプションです。可能な値は次のとおりです。

  • duration−アニメーションの実行時間を決定する文字列または数値。デフォルト値は400です。

  • easing−トランジションに使用するイージング機能を示す文字列。デフォルト値はswingです。可能な値はここにあります。

  • complete −これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。

  • children −これはブール値であり、一致した要素のすべての子孫にアニメーションを追加で適用する必要があるかどうかを表します。

  • queue −これは文字列/ブール型で、アニメーションをエフェクトキューに配置するかどうかを示します。

次の例は、toggleClass()メソッドの使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Switch Class Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .class1 {
            border-width : 10px;
            border-color : grey;
            background-color : #cedc98;
            color : black;
         }
      </style>
      
      <script>
         function toggle () {
            $("#para").toggleClass ("class1", 1000);
         }
      </script>
   </head>
   
   <body>
      <button onclick = toggle()> Toggle </button>
      <p id = "para" style = border-style:solid> Welcome to Tutorials Point </p>
   </body>
</html>

上記のコードをHTMLファイルに保存しましょう toggleclassexample.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

[切り替え]ボタンをクリックして、テキストのCSSクラスがどのように変更されるかを確認します。