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 ...
随机推荐
- linux 下 安装mysql
安装之前,因为redhat 是yum自带的,但是不能使用,因为要交钱,还要订阅,所以需要卸载,重新安装163提供的yum 在另外一篇文章介绍 yum list mysql* 列出所有关于mysal的安 ...
- 局域网中使用的IP地址有哪些？
当我们建设一个局域网的时候,需要为网络中的每台计算机分配一个IP地址.那么都有哪些IP地址可以使用在局域网中呢?局域网中的IP地址有什么规定呢? 在局域网中,我们是不能使用如202.106.45.11 ...
- 在命令行上启动genymotion虚拟机
自从有了genymotion,多机联调就解放了,一台电脑运行两个genymotion虚拟机毫无压力,不过也看用的是哪种os image,之前我以为google自己的Nexus应该最适应,哪知道开起来比 ...
- Entity Framework Code-First（9.7）：DataAnnotations - Table Attribute
DataAnnotations - Table Attribute: Table attribute can be applied to a class. Default Code-First con ...
- EIP权限工作流平台总结-2前端框架
1.预览地址:www.eipflow.com (1) 权限工作流:www.demo.eipflow.com/Account/Login (2) 基础权限版:www.auth.eipflow.com ...
- Unity -- AssetBundle(本地资源加载和加载依赖关系)
1.本地资源加载 1).建立Editor文件夹 2).建立StreamingAssets文件夹和其Windows的子文件夹 将下方第一个脚本放入Editor 里面 脚本一 资源打包AssetBund ...
- 浅谈JavaScript--闭包
闭包的概念 由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数". 变量的作用域 要理解闭包,首先必须理解J ...
- 51nod 1354【DP】
(我一定是A了一题假DP) 给定序列a[0],a[1],a[2],...,a[n-1] 和一个整数K时, 有多少子序列所有元素乘起来恰好等于K. K<=1e8; 思路: 感觉 k 的 约数是突破 ...
- How to download a file with plus symbol(+) filename in IIS?
How to download a file with plus symbol(+) filename in IIS? Original post link:https://www.cnblogs.c ...
- java知识点积累（二）
4.条件运算符(三元运算符): String type = score<60?"不及格":"及格"; int i = (string=="hel ...