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 ...
随机推荐
- K-NN回归算法
from sklearn.datasets import load_iris import numpy as np import matplotlib.pyplot as plt iris = loa ...
- LAMP 1.6 Discuz安装
1.下载 ...
- Java探索之旅(2)——GUI输入输出与代码的规范性
1.知识点概叙 ① 定名常量:关键字final,类似C++ const定义,一般用大写:final double PI=3.1415926 ② 5/2=2:5.0/2=2.5://通常意义的除法,至少 ...
- [原创]SQL表值函数:返回从当前周开始往回的自定义周数
一如往常一样,一篇简短博文记录开发过程中遇到的一个问题.初衷都是记录自己的一些Idea,也是希望能够帮助一些凑巧遇到此类需求的问题,这个需求的的开端是因为,要统计最近N周的销售数据. 接下来我们来看看 ...
- 关于C/C++中的“auto”关键字
C/C++ 98标准 C++03标准 早在C++98标准中就存在了auto关键字,那时的auto用于声明变量为自动变量,自动变量意为拥有自动的生命期.此用法是多余的,因为即使定义变量时不加" ...
- window 删除文件提示指定的文件名无效或太长
方法0: 使用 chkdsk 磁盘修复工具 .单击“开始”,点击“运行”,输入cmd并回车打开命令提示符窗口: .在此窗口输入以下命令: 例如:检查并修复D分区 chkdsk D: /f 回车,输入 ...
- 软件开发中对MVC的一些理解
接口隔离 通俗一点讲,接口隔离就是当一个类需要继承另一个类时, 如果被继承的类中有继承的类用不到的方法或者属性时,就不要去实现这个继承.如果真的情非得已必须要继承,那么也需要从被继承的类中再提取出一个 ...
- kali linux学习笔记之系统定制及优化(附：中文输入法设置)
fix update flash plugin on kali rolling author:@kerker 0x00设置软件源 root@kali:~# vim /etc/apt/sources.l ...
- 微信小程序自学第二课：app及页面的生命周期、使用setData绑定数据
一.App声明周期 1.App() app.js中的App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等. 示例代码: App({ onLaunch: fun ...
- 从CGI到FastCGI到PHP-FPM
从CGI到FastCGI到PHP-FPM 背景 笔者在学习这几个名词的时候,也是被百度到的相关文章迷惑.涉及到的主要名词包括 1. CGI协议 2. CGI脚本 3. PHP-CGI 4. FastC ...