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事件模型代码
Jul 01 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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 输出简单动态WAP页面
2009/06/09 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
Python画图高斯分布的示例
2019/07/10 Python
Python笔记之观察者模式
2019/11/20 Python
详解Anaconda 的安装教程
2020/09/23 Python
Python可以用来做什么
2020/11/23 Python
新闻编辑自荐信
2013/11/03 职场文书
美发活动策划书
2014/01/14 职场文书
假面舞会策划方案
2014/05/29 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
八达岭长城导游词
2015/01/30 职场文书
廉政承诺书范文
2015/04/28 职场文书
刑事上诉状范文
2015/05/22 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书