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

更新时间：2015年07月23日 15:33:07 作者：李荣飞

这篇文章主要介绍了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>

希望本文所述对大家的jquery程序设计有所帮助。

您可能感兴趣的文章:

JQuery中两个ul标签的li互相移动实现方法
这篇文章主要介绍了JQuery中两个ul标签的li互相移动实现方法,可实现ul标签中li标签内容相互替换的技巧,涉及jQuery操作页面元素的相关技巧,需要的朋友可以参考下
2015-05-05
jQuery实现简单的抽奖游戏
这篇文章主要为大家详细介绍了jQuery实现简单的抽奖游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
jQuery easyUI datagrid 增加求和统计行的实现代码
下面小编就为大家带来一篇jQuery easyUI datagrid 增加求和统计行的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
JQuery ZTree使用方法详解
这篇文章主要为大家详细介绍了JQuery ZTree使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
使用异步controller与jQuery实现卷帘式分页
这篇文章主要介绍了使用异步controller与jQuery实现卷帘式分页，使用异步controller与jQuery按需加载内容，当用户开始通过网站的内容滚动时进一步加载内容。,需要的朋友可以参考下
2019-06-06
jquery复选框CHECKBOX全选、反选
在JQUERY官方站点看到了另一个方法.更加简单,给大家分享出来: 官方给的函数名为CheckboxGroup;顾名思义就是选取一组CHECKBOX.最新版是在6月18号发布的:
2008-08-08
使用jquery+iframe做一个ajax上传效果(实例)
下面小编就为大家带来一篇使用jquery+iframe做一个ajax上传效果(实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
jquery日历插件datepicker用法分析
这篇文章主要介绍了jquery日历插件datepicker用法,结合实例形式分析了jquery日历插件datepicker的定义与使用技巧,需要的朋友可以参考下
2016-01-01
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍，需要的朋友可以参考下。
2011-11-11
使用jQuery加载html页面到指定的div实现方法
下面小编就为大家带来一篇使用jQuery加载html页面到指定的div实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07