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 相关文章推荐
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
详解VUE 数组更新
Dec 16 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 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 FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
改变隐藏的input中value的值代码
2013/12/30 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
node.js的事件机制
2017/02/08 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
vue离开当前页面触发的函数代码
2020/09/01 Javascript
Python中的rfind()方法使用详解
2015/05/19 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
电子工程求职信
2014/07/17 职场文书
追讨欠款律师函
2015/05/27 职场文书
房屋质量投诉书
2015/07/02 职场文书
2016年寒假见闻
2015/10/10 职场文书
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers