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 相关文章推荐
jquery ui对话框实例代码
May 10 Javascript
各种常用的JS函数整理
Oct 25 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
Boostrap入门准备之border box
May 09 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
vuex学习之Actions的用法详解
Aug 29 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 Javascript
js实现轮播图特效
May 28 Javascript
javascript实现移动端轮播图
Dec 09 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简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
php中session退出登陆问题
2014/02/27 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
详解PHP归并排序的实现
2016/10/18 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
javascript实现画板功能
2020/04/12 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
华为c/c++笔试题
2016/01/25 面试题
生产管理的三大手法
2013/11/11 职场文书
技术学校毕业生求职信分享
2013/12/02 职场文书
高分子材料与工程专业个人求职信
2013/12/15 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
用Python实现Newton插值法
2021/04/17 Python
php双向队列实例讲解
2021/11/17 PHP
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python