jquery实现类似淘宝星星评分功能有截图


Posted in Javascript onSeptember 15, 2014

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“

$(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();
});
})

出现的效果是这样的:

jquery实现类似淘宝星星评分功能有截图

可惜的是你一点击下去--就不可更改了。真的是很悲伤啊。大概也只是做了一个小样子而已。

prevAll() 和nextAll()这两个方法?暂且说方法吧。在jquery的文档可以查得到。

index 在jquery 里是返回元素的索引值,从零开始。分数呢就加1,

Javascript 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
extjs form textfield的隐藏方法
Dec 29 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
javascript使用数组的push方法完成快速排序
Sep 15 #Javascript
一款由jquery实现的整屏切换特效
Sep 15 #Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 #Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 #Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 #Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 #Javascript
如何用JavaScript定义一个类
Sep 12 #Javascript
You might like
php 表单验证实现代码
2009/03/10 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
跟老齐学Python之for循环语句
2014/10/02 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
Python实现搜索算法的实例代码
2020/01/02 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
简历自我评价模版
2014/01/31 职场文书
卫生系统先进事迹
2014/05/13 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
贷款收入证明范本
2015/06/12 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
小学远程教育工作总结
2015/08/13 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android