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>
section suivante