Rumah > Artikel > hujung hadapan web > Gunakan kaedah jQuery toggleClass yang mudah untuk menukar warna antara rows_jquery
Hari ini, kaedah mudah toggleClass() telah digunakan untuk melaksanakan perubahan warna berjalin: kodnya adalah seperti berikut:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>隔行换色</title> <script src="js/jquery-1.4.2.min.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> <div id="aaa"> <form> <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1"> <tr> <td width="30" align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> </table> </form> </div> <script>
Kaedah pertama yang lebih rumit:
$(function() { $("#table tr").hover(function() { $(this).addClass("h"); },function() { $(this).removeClass("h"); }) $("input").click(function() { if($(this).attr("checked")) { $(this).closest("tr").addClass("c"); } else { $(this).closest("tr").removeClass("c"); } }) })
Kaedah kedua yang lebih mudah:
toggleClass() Togol tetapan atau mengalih keluar satu atau lebih kelas elemen yang dipilih.
Kaedah ini menyemak kelas yang ditentukan dalam setiap elemen. Menambah kelas jika ia tidak wujud, atau mengalih keluarnya jika ia ditetapkan. Ini dipanggil kesan togol.
Walau bagaimanapun, dengan menggunakan parameter "suis", anda boleh menentukan bahawa hanya kelas akan dialih keluar atau hanya ditambah.
$(function(){ $("#table tr").hover(function(){ $(this).toggleClass("h"); }) $("input").click(function(){ var d = $(this); d.closest('tr').toggleClass("c",d.attr("checked")) ; }) }) </script> </body> </html>