jquery实现类似淘宝星星评分功能实例


Posted in Javascript onSeptember 12, 2014

本文实例讲述了jquery实现类似淘宝星星评分功能的方法,分享给大家供大家参考之用。具体方法如下:

html部分代码如下:

<body>
  <div id="div">
    <ul>
      <li>☆</li>
      <li>☆</li>
      <li>☆</li>
      <li>☆</li>
      <li>☆</li>
    </ul>
  </div>
  <p id="p"></p>
  <p id="score"></p>
</body>

上述代码中:

id="p"显示即时分数

id="score"显示最终分数

javascript代码如下:

<script type="text/javascript">
$(function () {
  //为所有的li标签绑定mouseout和mouseover事件。bind({事件名:function(){},事件名:function(){}})的方法绑定多个事件
  $("#div li").bind({
 mouseout:function () {
   $(this).css("color", "black").html("☆").prevAll().css("color", "black").html("☆")
 },
 mouseover: function () {
   $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")
 }
  });
  //=实时显示分数.【index】搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
   $("#div li").mouseover(function () {
   $("#p").html(parseInt( $(this).index("#div li"))+1);
 });
  //鼠标按下时,确定分数。额,就不更改了,大局已定。
 $("#div li").mousedown(function () {
   $("#score").html(("你选择的分数是" + (parseInt($(this).index("#div li")) + 1)));
   $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")
   //全部li标签的绑定事件全部清除--unbind方法可以加参数清除特定的事件。不加全部清除
   $(this).unbind().prevAll().unbind().nextAll().unbind();
 });
  })
</script>

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

Javascript 相关文章推荐
Js的MessageBox
Dec 03 Javascript
jquery 选择器部分整理
Oct 28 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
canvas多重阴影发光效果实现
Apr 20 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 #Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 #Javascript
js通过location.search来获取页面传来的参数
Sep 11 #Javascript
Javascript中设置默认参数值示例
Sep 11 #Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 #Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 #Javascript
用js传递value默认值的示例代码
Sep 11 #Javascript
You might like
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
php 修改密码实现代码
2017/05/24 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
Python函数学习笔记
2008/10/07 Python
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
python实现数字炸弹游戏
2020/07/17 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
python 自动识别并连接串口的实现
2021/01/19 Python
请说出以下代码输出什么
2013/08/30 面试题
Shell脚本如何向终端输出信息
2014/04/25 面试题
校园报刊亭创业计划书
2014/01/02 职场文书
出纳会计岗位职责
2014/03/12 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
微笑服务演讲稿
2014/05/13 职场文书
个人年底工作总结
2015/03/10 职场文书
开票证明
2015/06/23 职场文书
2016年少先队活动总结
2016/04/06 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
Python first-order-model实现让照片动起来
2022/06/25 Python