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 自定义的联动下拉框
Feb 07 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
js获取form表单中name属性的值
Feb 27 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
JS实现页面鼠标点击出现图片特效
Aug 19 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
PHP生成带有雪花背景的验证码
2006/10/09 PHP
来自PHP.NET的入门教程
2006/10/09 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
javaScript基础详解
2017/01/19 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
python处理csv数据的方法
2015/03/11 Python
python统计日志ip访问数的方法
2015/07/06 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
python数据归一化及三种方法详解
2019/08/06 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
编写strcpy函数
2014/06/24 面试题
一道SQL存储过程面试题
2016/10/07 面试题
应届生新闻编辑求职信
2013/11/19 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
动员大会主持词
2014/03/20 职场文书
股东协议书范本
2014/04/14 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
六一儿童节活动总结
2014/08/27 职场文书
转学证明范本
2015/06/19 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
Python开发简易五子棋小游戏
2022/05/02 Python