jquery--实现类似淘宝星星评分功能
- 不正之处，欢迎指正。^-^.好绕的话
贴码。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“
<script type="text/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();
});
})
</script>
出现的效果是这样的：
可惜的是你一点击下去--就不可更改了。真的是很悲伤啊。大概也只是做了一个小样子而已。
prevAll() 和nextAll()这两个方法？暂且说方法吧。在jquery的文档可以查得到。 index 在jquery 里是返回元素的索引值，从零开始。分数呢就加1,
jquery--实现类似淘宝星星评分功能的更多相关文章
- 如何:使用PicturBox实现类似淘宝网站图片的局部放大功能
转载至http://xuzhihong1987.blog.163.com/blog/static/267315872011822113131823/ 概要: 本文将讲述如何使用PictureBox控件 ...
- jquery模仿淘宝星星打分
今天做论坛页面有星星评分功能,以下是代码.用的时候引入jquery <span> <ul class="hs_df_xx"> <li><i ...
- openresty + lua-resty-weedfs + weedfs + graphicsmagick动态生成缩略图（类似淘宝方案）
openresty + lua-resty-weedfs + weedfs + graphicsmagick动态生成缩略图(类似淘宝方案) --大部分的网站都要涉及到图片缩略图的处理,比如新闻配图,电 ...
- 写一个类似淘宝的ios app需要用到哪些技术？
写一个类似淘宝的ios app需要用到哪些技术? 让我想起了有人私信我,说不缺钱,做个类似知乎的东西,包括加运营,需要多少钱. 扯淡结束,正好最近看了一点这方面的东西,也许对题主来说有点帮助. 手机淘 ...
- Zencart先生成订单后付款，类似淘宝后台修改订单价格
Zencart 使用 Paypal 付款,会出现漏单的情况,即 paypal 已经收到客户的付款,但是网站后台没有客户的订单.导致 paypal 漏单的原因大致会是当客户跳转到Paypal 网站付款完 ...
- 剁手党也有春天 -- 淘宝 UWP ”比较“功能诞生记
前言 网购已经不再是现在的时髦,而变成了我们每天的日常生活.上网已经和买买买紧密地联系在了一起,成为了我们的人生信条.而逛街一词,越来越多地变成了一种情怀.有时候我们去逛街,要么是为了打发时间,要么是 ...
- JS仿淘宝星星评价
//直接复制过去就可以了(你也可以吧css和js封装成css和js文件导入). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transit ...
- solr入门之參考淘宝搜索提示功能优化拼音加汉字搜索功能
首先看一下从淘宝输入搜索keyword获取到的一些数据信息: 第一张:使用拼音的全程来查询 能够看到提示的是匹配的转换的拼音的方式,看最后一个提示项 这里另一个在指定分类文件夹下搜索的功能,难道后台还 ...
- ios 类似淘宝评论星星功能
创建星星视图: //星星 _myview = [[UIView alloc]initWithFrame:CGRectMake(95, 5, 200, 50)]; UIPanGestureRecogni ...
随机推荐
- excel2003, 2007最大行列、sheet数
1.excel2003版本一个工作表最多可有65536行,行用数字1—65536表示; 256列,列用英文字母A—Z,AA—AZ,BA—BZ,……,IA—IV表示.2.一个工作簿中最多含有25 ...
- Centos6.5安装JDK8教程(一)
[原] 转载请注明原文地址, 保持对知识基本尊重,谢谢! Win7宿主系统 VmWareWorkstation 11应用下的 Centos6.5系统. /******************* ...
- ViewController lifecyle（IOS学习）
斯坦福的ios教学视频笔记一张,如下
- PopupWindow 从底部弹出窗体
第一步 : 初始化PopupWindow private void initPop() { if (view == null) { // 照片 view = View.inflate(Registe ...
- p2345 奶牛集会
传送门 题目 约翰的N 头奶牛每年都会参加“哞哞大会”.哞哞大会是奶牛界的盛事.集会上的活动很 多,比如堆干草,跨栅栏,摸牛仔的屁股等等.它们参加活动时会聚在一起,第i 头奶牛的坐标为Xi,没有两头奶 ...
- ibatis分页的两种方式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- 为什么ps中CPU占用率会有超出%100的现象？
前面的关于ps中的%CPU的含义一文已经介绍了CPU占用率的含义,那么为什么有时会在ps的输出中看到CPU占用率超出%100的现象呢?我们知道在/proc目录下每个进程都会有一个以它的PID以名字的目 ...
- CocoaPods常用操作命令
查看镜像: gem sources -l 删除镜像 gem sources --remove https://rubygems.org/ 添加镜像 gem sources -a https://gem ...
- MySQL中的正则表达式
正则表达式是用正则表达式语言来建立 基本字符的匹配 .是正则表达式语言中的一个特殊的字符,它表示匹配任意一个字符 在LIKE和REGEXP之间有一个重要的差别,LIKE匹配整个列,如果被匹配的文本仅在 ...
- oracle分页计算公式
//page是页数,rows是显示行数 int page=2; int rows=5; List<Articles> list=a.select(page*rows+1,(page-1)* ...