Heim > Web-Frontend > js-Tutorial > jQuery方法简洁实现隔行换色及toggleClass的使用_jquery

jQuery方法简洁实现隔行换色及toggleClass的使用_jquery

WBOY
Freigeben: 2016-05-16 17:40:30
Original
1266 Leute haben es durchsucht

今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下:

复制代码 代码如下:





隔行换色










































蓝枫前端 蓝枫前端
蓝枫前端 蓝枫前端
蓝枫前端 蓝枫前端
蓝枫前端 蓝枫前端
蓝枫前端 蓝枫前端
蓝枫前端 蓝枫前端
蓝枫前端 蓝枫前端



<script> <BR></script>

第一种比较复杂的方法
复制代码 代码如下:

$(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");
}
})
})

第二种比较简单的方法
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。
不过,通过使用 "switch" 参数,您能够规定只删除或只添加类。
复制代码 代码如下:

$(function(){
$("#table tr").hover(function(){
$(this).toggleClass("h");
})
$("input").click(function(){
var d = $(this);
d.closest('tr').toggleClass("c",d.attr("checked")) ;
})
})



Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage