Apabila melakukan kesan tertentu, gaya tertentu nod yang sama boleh ditukar secara berterusan, iaitu, penukaran yang saling eksklusif antara addClass dan removeClass, seperti kesan perubahan warna berjalin
jQuery menyediakan kaedah toggleClass Digunakan untuk memudahkan logik yang saling eksklusif ini, menambah dan memadam Kelas secara dinamik melalui kaedah toggleClass Satu pelaksanaan adalah bersamaan dengan addClass dan satu lagi pelaksanaan adalah bersamaan dengan kaedah removeClass
toggleClass(): setiap elemen dalam set elemen yang dipadankan. Tambah atau alih keluar satu atau lebih kelas gaya, bergantung pada sama ada kelas gaya wujud atau nilai atribut togol. Iaitu: jika ia wujud (tidak wujud), padamkan (tambah) kelas
toggleClass( className ): satu atau lebih (dipisahkan dengan ruang) digunakan untuk menogol pada setiap elemen dalam set elemen yang dipadankan ) Gaya nama kelas
toggleClass( className, switch ): Nilai Boolean yang digunakan untuk menentukan sama ada gaya perlu ditambah atau dialih keluar
toggleClass( [switch ] ): Nilai Boolean yang digunakan untuk menentukan sama ada gaya harus ditambah atau dialih keluar Nilai Boolean sama ada kelas ditambah atau dialih keluar
toggleClass( function(index, class, switch) [, switch ] ): digunakan untuk mengembalikan kelas gaya yang digunakan untuk menogol pada setiap elemen dalam nama set elemen yang dipadankan bagi fungsi. Menerima kedudukan indeks elemen dan kelas gaya lama elemen sebagai parameter
Nota:
toggleClass ialah logik yang saling eksklusif, iaitu, dengan menilai sama ada nama Kelas yang ditentukan wujud pada elemen yang sepadan, Jika ada, padamkannya, jika tidak, tambahkannya
toggleClass akan mengekalkan nama Kelas asal dan menambahnya, dipisahkan dengan ruang
Mari tulis contoh di bawah
<!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>
bahagian seterusnya