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 相关文章推荐
js验证表单大全
Nov 25 Javascript
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
深入理解vue路由的使用
Mar 24 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 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
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
python实现从web抓取文档的方法
2014/09/26 Python
python实现员工管理系统
2018/01/11 Python
Python构建图像分类识别器的方法
2019/01/12 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
比利时香水网上商店:NOTINO
2018/03/28 全球购物
网络事业创业计划书范文
2014/01/09 职场文书
宿舍违规检讨书
2014/01/12 职场文书
运动会邀请函范文
2014/02/06 职场文书
保护野生动物倡议书
2014/05/16 职场文书
五年级学生评语大全
2014/12/26 职场文书
公司会议开幕词
2016/03/03 职场文书
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电