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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
js实现购物车功能
Jun 12 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 Javascript
浅析JavaScript中的变量提升
Jun 01 Javascript
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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
php adodb介绍
2009/03/19 PHP
PHP操作xml代码
2010/06/17 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
php中final关键字用法分析
2016/12/07 PHP
jquery CSS选择器笔记
2010/03/29 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
详解Python locals()的陷阱
2019/03/26 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
python能在浏览器能运行吗
2020/06/17 Python
python如何查看安装了的模块
2020/06/23 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
数据库的约束含义
2012/09/09 面试题
Prototype是怎么扩展DOM的
2014/10/01 面试题
如何写毕业求职自荐信
2013/11/06 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
php中pcntl_fork详解
2021/04/01 PHP