JqueryUI-クラスの切り替え

この章では、操作に役立つ新しいクラスである* toggleClass（）*メソッドについて説明します。 _toggleClass（）_メソッドは、一致した要素のセット内の各要素に1つ以上のクラスを追加または削除します。

構文

jQueryUIのバージョン1.0で追加

toggleClass（）*メソッドの基本的な構文は次のとおりです-

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )

Sr.No.	Parameter & Description
1	className これは文字列であり、追加、削除、または切り替えられるCSSクラス名またはクラス名のスペース区切りリストを表します。
2	switch これはブール型であり、指定された場合、_toggleClass（）_メソッドが_true_の場合はクラスを追加し、_false_の場合はクラスを削除します。
3	duration これは、Number型またはString型で、オプションで_slow、normal、fast、_、またはミリ秒単位のエフェクトの期間のいずれかを提供します。省略すると、animate（）メソッドがデフォルトを決定します。デフォルト値は_400_です。
4	easing animate（）メソッドに渡されるイージング関数の名前。
5	complete これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。

jQueryUIのバージョン1.9で追加

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

.toggleClass( className [, switch ] [, options ] )

Sr.No.

Parameter & Description

1

className

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

2

switch

これはブール型であり、指定された場合、_toggleClass（）_メソッドが_true_の場合はクラスを追加し、_false_の場合はクラスを削除します。

3

options

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

duration -アニメーションの実行時間を決定する文字列または数値。デフォルト値は_400_です。
easing -遷移に使用するイージング関数を示す文字列。デフォルト値は_swing_です。可能な値はlink：/jqueryui/jqueryui_easings [ここ]です。
complete -これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。
children -これはブール値であり、一致する要素のすべての子孫にアニメーションを追加で適用するかどうかを表します。
queue -これは、アニメーションをエフェクトキューに配置するかどうかを示すString/Boolean型です。

例

次の例は、_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 に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

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

Jqueryui-toggleclass

目次

JqueryUI-クラスの切り替え

構文

jQueryUIのバージョン1.0で追加

jQueryUIのバージョン1.9で追加

例