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 相关文章推荐
JavaScript 学习技巧
Feb 17 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
JavaScript实现单点登录的示例
Sep 23 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
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
Python中zfill()方法的使用教程
2015/05/20 Python
Python Requests库基本用法示例
2018/08/20 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
用Python进行websocket接口测试
2020/10/16 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
春节联欢晚会主持词范文
2014/03/24 职场文书
会计求职信
2014/05/29 职场文书
最美护士演讲稿
2014/08/27 职场文书
考研复习计划
2015/01/19 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python