简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Attributs et styles jQuery (5)

Lors de l'exécution de certains effets, un certain style du même nœud peut être commuté en permanence, c'est-à-dire la commutation mutuellement exclusive entre addClass et removeClass, comme l'effet de changement de couleur entrelacé

jQuery fournit une méthode toggleClass Utilisé pour simplifier cette logique mutuellement exclusive, ajoutez et supprimez dynamiquement une classe via la méthode toggleClass. Une exécution est équivalente à addClass et une autre exécution est équivalente à la méthode removeClass

toggleClass() : chaque élément de l'ensemble d'éléments correspondant. Ajoutez ou supprimez une ou plusieurs classes de style, selon que la classe de style existe ou selon la valeur de l'attribut toggle. C'est-à-dire : si elle existe (n'existe pas), supprimez (ajoutez) une classe

toggleClass( className ) : une ou plusieurs (séparées par des espaces) utilisées pour basculer sur chaque élément de l'ensemble d'éléments correspondant) Style nom de classe

toggleClass( className, switch ) : Une valeur booléenne utilisée pour déterminer si le style doit être ajouté ou supprimé

toggleClass( [switch ] ) : Une valeur booléenne utilisée pour déterminer si le style le style doit être ajouté ou supprimé Valeur booléenne indiquant si la classe est ajoutée ou supprimée

toggleClass( function(index, class, switch) [, switch ] ) : utilisée pour renvoyer la classe de style utilisée pour basculer sur chaque élément dans l'élément correspondant, définissez le nom d'une fonction. Reçoit la position d'index de l'élément et l'ancienne classe de style de l'élément en tant que paramètres

Remarque :

toggleClass est une logique mutuellement exclusive, c'est-à-dire en jugeant si le nom de classe spécifié existe sur l'élément correspondant, S'il y en a, supprimez-le, sinon ajoutez-le

toggleClass conservera le nom de classe d'origine et l'ajoutera, séparé par des espaces

Écrivons un exemple ci-dessous 

<!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>


Formation continue
||
<!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>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  491992 joue
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！