jquery实现简单实用的打分程序实例

2024-05-06 16:23:36

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了jquery实现简单实用的打分程序,涉及jquery节点遍历与样式操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jquery实现简单实用的打分程序。分享给大家供大家参考。具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<script src="js/jquery-1.7.1.min.js"></script>

<script src="js/jquery.raty.min.js"></script>

<script type="text/javascript">

$(function(){

$("#div1").hover(function(){

$("#div1 li").hover(function(){

h=0;

n=$("#div1 li").index(this);

for(var i=0;i<=n;i++){

$("#div1 li").eq(i).addClass("on");

}

$("#div1 li").click(function(){

h=1;

m=$("#div1 li").index(this);

for(var i=0;i<=m;i++){

$("#div1 li").eq(i).addClass("on");

}

return;

})

},function(){

if(h==0)

for(var i=5;i>=n;i--){

$("#div1 li").eq(i).removeClass("on");

}

}

)

},function(){

if(h==0)

for(var i=0;i<=5;i++){

$("#div1 li").eq(i).removeClass("on");

}

})

})

</script>

<style type="text/css">

#div1 ul li{

margin:0 -8px;

width:30px;

height:34px;

list-style:none;

float:left;

width:35px;

background:url(img/xing1.gif) center center no-repeat;

margin-left:10px;

}

#div1 ul li.on{

background:url(img/xing2.gif) center center no-repeat;

}

#div1{

height:35px;

}

</style>

</head>

<body>

<div id="div1">

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</div>

</body>

</html>