jQuery方法簡潔實作隔行換色及toggleClass的使用_jquery

今天用簡潔的方法toggleClass()實作了隔行換色:程式碼如下：

複製程式碼 程式碼如下:

	藍楓前端	藍楓前端
	藍楓前端	藍楓前端
	藍楓前端	藍楓前端
	藍楓前端	藍楓前端
	藍楓前端	藍楓前端
	藍楓前端	藍楓前端
	藍楓前端	藍楓前端

<script> <BR><STRONG> <BR>第一種比較複雜的方法<div class="codetitle">： <span><a style="CURSOR: pointer" data="28205" class="copybut" id="copybut28205" onclick="doCopy('code28205')"><U>複製程式碼<div class="codebody" id="code28205"> 程式碼如下:<BR><BR> <BR>$(function() <BR>{ <BR>{ <BR>$( "#table tr").hover(function() <BR>{ <BR>$(this).addClass("h"); <BR>},function() <BR>{ <BR>$(this) .removeClass("h"); <BR>}) <BR>$("input").click(function() <BR>{ <BR>if($(this).attr("checked")) <BR>{ <BR>$(this).closest("tr").addClass("c"); <BR>} <BR>else <BR>{ <BR>$(this).closest("tr" ).removeClass("c"); <BR>} }) <BR>}) <STRONG> <BR><BR>第二種比較簡單的方法<BR>： <BR>toggleClass () 對設定或移除被選元素的一個或多個類別進行切換。 <div class="codetitle">此方法檢查每個元素中指定的類別。如果不存在則新增類，如果已設定則刪除之。這就是所謂的切換效果。 <span>不過，透過使用 "switch" 參數，您能夠規定只刪除或只新增類別。 <a style="CURSOR: pointer" data="6178" class="copybut" id="copybut6178" onclick="doCopy('code6178')"><U>複製程式碼<div class="codebody" id="code6178"><BR> 程式碼如下:<BR><BR> <BR>$(function(){ <BR><BR> <BR>$(function(){ <BR>$(" #table tr").hover(function(){ <BR>$(this).toggleClass("h"); <BR>}) <BR>$("input").click(function(){ <BR>var d = $(this); <BR>d.closest('tr').toggleClass("c",d.attr("checked")) ; }) <🎜>}) <🎜> </script>