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之三(封装和信息隐藏)
Jan 27 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 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
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
python函数装饰器用法实例详解
2015/06/04 Python
Python语法快速入门指南
2015/10/12 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
Python函数装饰器实现方法详解
2018/12/22 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
使用npy转image图像并保存的实例
2020/07/01 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
2014学雷锋活动总结
2014/03/09 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
大学生简短的自我评价
2014/09/12 职场文书
车辆年检委托书范本
2014/10/14 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
合作合同协议书范本
2015/01/27 职场文书
2015年宣传工作总结
2015/04/08 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书