Heim > Artikel > Web-Frontend > Verwenden Sie die einfache jQuery-Methode toggleClass, um die Farben zwischen rows_jquery zu ändern
Heute wurde eine einfache Methode toggleClass() verwendet, um interlaced Farbwechsel zu implementieren: Der Code lautet wie folgt:
<!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>
Die erste kompliziertere Methode:
$(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"); } }) })
Die zweite einfachere Methode:
toggleClass() Schaltet das Festlegen oder Entfernen einer oder mehrerer Klassen ausgewählter Elemente um.
Diese Methode überprüft die angegebene Klasse in jedem Element. Fügt die Klasse hinzu, wenn sie nicht vorhanden ist, oder entfernt sie, wenn sie festgelegt ist. Dies wird als Toggle-Effekt bezeichnet.
Mit dem Parameter „switch“ können Sie jedoch festlegen, dass nur Klassen entfernt oder nur hinzugefügt werden.
$(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>