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 ...
随机推荐
- makefile基本语法
多文件编程的小例子功能:在main.c里面调用其他两个源文件里面的函数,然后输出字符串. 1.main.c #include"mytool1.h"#include" ...
- supervisor启动worker源码分析-worker.clj
supervisor通过调用sync-processes函数来启动worker,关于sync-processes函数的详细分析请参见"storm启动supervisor源码分析-superv ...
- 截止JDK1.8版本,java并发框架支持锁包括?
读写锁 自旋锁 乐观锁
- SPOJ - REPEATS Repeats (后缀数组+RMQ)
题意:求一个串中出现重复子串次数最多的数目. 析:枚举每个长度的子串,至少要重复两次,必然会经过s[l*i]中相邻的两个,然后再分别向前和向后匹配即可. 代码如下: #pragma comment(l ...
- 获取指定日期相关DATENAME和DATEPART数据
DATENAME和DATEPART有何区别,Insus.NET写成一个函数,可以方便查询与对比: 一个是返回一个字符串,另一个是返回一个整数. SET ANSI_NULLS ON GO SET QUO ...
- python网络爬虫之requests库
Requests库是用Python编写的HTTP客户端.Requests库比urlopen更加方便.可以节约大量的中间处理过程,从而直接抓取网页数据.来看下具体的例子: def request_fun ...
- React.Component（V16.8.6）
组件的生命周期 挂载 当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下: constructor() static getDerivedStateFromProps() render() ...
- 浅谈JavaScript--this指向
js中this的值取决于调用的模式 方法调用模式 var student={ name:"adoctors", showThis:function(){ console.log(t ...
- cf785D(组合数学)
题目链接: http://codeforces.com/problemset/problem/785/D 题意: 左边全为 '(' 右边全为 ')' 且两者数量想等的字符串称为 RSBS. 给出一个由 ...
- uva11491 奖品的价值（贪心）
uva11491 奖品的价值(贪心) 给你一个n位的整数,请你删除其中的d个数字,使得整数尽可能大.1<=d<n<=1e5. 首先因为前面的数位更重要,所以从左往右将每一位数字加入栈 ...