jQuery の属性とスタイル (5)

特定のエフェクトを実行するとき、同じノードの特定のスタイルが継続的に切り替わる可能性があります。つまり、インターレースカラー変更エフェクトなど、addClass とremoveClass の間の相互排他的な切り替えです。

jQuery は、この相互作用を簡素化する toggleClass メソッドを提供します。ロジックでは、toggleClass メソッドを通じてクラスを動的に追加および削除します。1 回の実行は addClass と同等で、別の実行は RemoveClass

toggleClass() メソッドと同等です。一致した要素セット内の各要素で 1 つ以上のスタイルクラスを追加または削除します。このスタイルクラスが存在するかどうか、または toggle 属性の値によって異なります。つまり、クラスが存在する (存在しない) 場合は削除 (追加) します。

toggleClass( className ): 一致した要素セット内の各要素を切り替えるために使用される 1 つ以上の (スペースで区切られた) スタイルクラス名

toggleClass( className, switch ): スタイルを追加するか削除するかを決定するために使用されるブール値

toggleClass( [switch] ): スタイルクラスを追加するか削除するかを決定するために使用されるブール値 toggleClass( function(index, class, switch) [, switch ] ): 一致した要素セット内の各要素をオンにするために使用されるスタイルクラス名を返すために使用される関数。要素のインデックス位置と要素の古いスタイルのクラスをパラメータとして受け取ります

注:

toggleClass は相互に排他的なロジックです。つまり、指定されたクラス名が対応する要素に存在するかどうかを判断し、存在する場合は削除します

toggleClass を追加すると、元のクラス名が保持され、スペースで区切って追加されます

例を書いてみましょう

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>隔行换色</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style type="text/css">
    body,table,td,{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
    
    .h {
        background: #f3f3f3;
        color: #000;
    }
    
    .c {
        background: #ebebeb;
        color: #000;
    }
    </style>
</head>

<body>
    <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
    </table>
    </div>
    <script type="text/javascript">
    //给所有的tr元素加一个class="c"的样式
    $("#table tr").toggleClass("c");
    </script>
    <script type="text/javascript">
    //给所有的偶数tr元素切换class="c"的样式
    //所有基数的样式保留，偶数的被删除
    $("#table tr:odd").toggleClass("c");
    </script>
    <script type="text/javascript">
    //第二个参数判断样式类是否应该被添加或删除
    //true，那么这个样式类将被添加;
    //false，那么这个样式类将被移除
    //所有的奇数tr元素，应该都保留class="c"样式
    $("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的
    </script>
</body>

</html>

学び続ける

新しいファイル

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>隔行换色</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style type="text/css"> body,table,td,{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .h { background: #f3f3f3; color: #000; } .c { background: #ebebeb; color: #000; } </style> </head> <body> <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1"> <tr> <td>php中文网</td> <td>php.cn</td> </tr> <tr> <td>php中文网</td> <td>php.cn</td> </tr> <tr> <td>php中文网</td> <td>php.cn</td> </tr> <tr> <td>php中文网</td> <td>php.cn</td> </tr> <tr> <td>php中文网</td> <td>php.cn</td> </tr> </table> </div> <script type="text/javascript"> //给所有的tr元素加一个class="c"的样式 $("#table tr").toggleClass("c"); </script> <script type="text/javascript"> //给所有的偶数tr元素切换class="c"的样式 //所有基数的样式保留，偶数的被删除 $("#table tr:odd").toggleClass("c"); </script> <script type="text/javascript"> //第二个参数判断样式类是否应该被添加或删除 //true，那么这个样式类将被添加; //false，那么这个样式类将被移除 //所有的奇数tr元素，应该都保留class="c"样式 $("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的 </script> </body> </html>

提出するリセットコード

自動運転