简易-五星评分-jQuery纯手写
超级简单的评分功能,分为四个步骤轻松搞定:
第一步:
引入jquery文件;这里我用百度CDN的jquery:
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
第二步:
写HTML代码;这里的星星我用的是符号的星星,也可以做成图片,用2张背景图片进行切换:
<div class="score_star">
<i>★</i>
<i>★</i>
<i>★</i>
<i>★</i>
<i>★</i>
<p>您还未评价</p>
</div>
第三步:
写CSS样式;这里我为了方便把样式写在head里面:
<style type="text/css">
.score_star {text-align: center;}
.score_star i {color: #999;font-size: 28px;font-style: normal;cursor: pointer;}
.score_star i.on {color: #c8a377;}
</style>
第四步:
写JavaScript代码;好了,打瞌睡的童鞋抬起头,灯光照过来,往死里照,要画重点了:
重点是slice(0,1)方法,就是选中重第0个到第1个,第一个数字是从0开始算起,第二个数字是从1开始算起的。
<script type="text/javascript">
$(function(){
// 星星选择评价事件
$(".score_star >i").click(function(event) {
// 点击当前
var _index = $(this).index();
// 所有的星星
var i = $(this).parent().find("i");
i.removeClass("on");
// 点击第i个,第一个到i个添加类名on
switch(_index){
case 0:
i.slice(0,1).addClass("on");
$(this).siblings('p').html("我有一个退货想和你谈谈");
break;
case 1:
i.slice(0,2).addClass("on");
$(this).siblings('p').html("已被99%人超越");
break;
case 2:
i.slice(0,3).addClass("on");
$(this).siblings('p').html("只能说一般般");
break;
case 3:
i.slice(0,4).addClass("on");
$(this).siblings('p').html("骚年还不错");
break;
case 4:
i.slice(0,5).addClass("on");
$(this).siblings('p').html("一见钟情");
break;
default:
alert("少年醒醒,你的代码出bug了");
break;
}
});
});
</script>
最后,整个代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易-星星评分-功能-jQuery纯手写</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
.score_star {text-align: center;}
.score_star i {color: #999;font-size: 28px;font-style: normal;cursor: pointer;}
.score_star i.on {color: #c8a377;}
</style>
</head>
<body>
<div class="score_star">
<i>★</i>
<i>★</i>
<i>★</i>
<i>★</i>
<i>★</i>
<p>您还未评价</p>
</div>
<script type="text/javascript">
$(function(){
// 星星选择评价事件
$(".score_star >i").click(function(event) {
// 点击当前
var _index = $(this).index();
// 所有的星星
var i = $(this).parent().find("i");
i.removeClass("on");
// 点击第i个,第一个到i个添加类名on
switch(_index){
case 0:
i.slice(0,1).addClass("on");
$(this).siblings('p').html("我有一个退货想和你谈谈");
break;
case 1:
i.slice(0,2).addClass("on");
$(this).siblings('p').html("已被99%人超越");
break;
case 2:
i.slice(0,3).addClass("on");
$(this).siblings('p').html("只能说一般般");
break;
case 3:
i.slice(0,4).addClass("on");
$(this).siblings('p').html("骚年还不错");
break;
case 4:
i.slice(0,5).addClass("on");
$(this).siblings('p').html("一见钟情");
break;
default:
alert("少年醒醒,你的代码出bug了");
break;
}
});
});
</script>
</body>
</html>
点击展示所有代码
怎么样,是不是很简单?
简易-五星评分-jQuery纯手写的更多相关文章
- 超级简单的jQuery纯手写五星评分效果
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...
- vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- springmvc 动态代理 JDK实现与模拟JDK纯手写实现。
首先明白 动态代理和静态代理的区别: 静态代理:①持有被代理类的引用 ② 代理类一开始就被加载到内存中了(非常重要) 动态代理:JDK中的动态代理中的代理类是动态生成的.并且生成的动态代理类为$Pr ...
- 纯手写Myatis框架
1.接口层-和数据库交互的方式 MyBatis和数据库的交互有两种方式: 使用传统的MyBatis提供的API: 使用Mapper接口: 2.使用Mapper接口 MyBatis 将配置文件中的每一个 ...
- SQL纯手写创建数据库到表内内容
建表啥的只点点鼠标,太外行了,不如来看看我的纯手写,让表从无到有一系列:还有存储过程临时表,不间断的重排序: 一:建数据库 create Database Show on primary ( name ...
- 纯手写SpringMVC到SpringBoot框架项目实战
引言 Spring Boot其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 通过这种方式,springboot ...
- [jQuery插件]手写一个图片懒加载实现
教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...
- 纯手写实现ajax分页功能
前言 最近用到了这个功能,百度大半天,网上的不是有各种问题就是需要引入其他的插件,无奈,只能自己写,大致功能已经完成.前端页面用bootstrap做样式,分页功能用ajax实现,没用其他插件哦,只引入 ...
- 纯手写SpringMVC架构,用注解实现springmvc过程
1.第一步,首先搭建如下架构,其中,annotation中放置自己编写的注解,主要包括service controller qualifier RequestMapping 第二步:完成对应的anno ...
随机推荐
- 1001. Exponentiation高精度运算总结
解题思路 这道题属于高精度乘法运算,要求输入一个实数R一个指数N,求实数R的N次方,由于R有5个数位,而N又特别大,因此用C++自带的数据类型放不下. 解题思路是通过数组储存每次乘积结果和底数的每一位 ...
- Caffe学习系列(四)之--训练自己的模型
前言: 本文章记录了我将自己的数据集处理并训练的流程,帮助一些刚入门的学习者,也记录自己的成长,万事起于忽微,量变引起质变. 正文: 一.流程 1)准备数据集 2)数据转换为lmdb格式 3)计算 ...
- Centos7:利用crontab定时执行任务
cron服务是Linux的内置服务,但它不会开机自动启动.可以用以下命令启动和停止服务: /sbin/service crond start /sbin/service crond stop /sbi ...
- 【DevExpresss】3、LookUpEdit详解(转载)
[DevExpresss]3.LookUpEdit详解 哈,今天又用到了LookUpEdit控件,主要是用来实现模糊查询和自由输入功能,然而由于长时间没用了,一阵手忙脚乱的,这里把网上收集的一部分教程 ...
- Http协议---Hyper Text Transfer Protocol
HTTP是一个基于TCP/IP通信协议来传递数据(超文本传输协议) 好久木来更新文章了~我又回归了,此刻鼓掌...... 今天就来分享下http协议的小知识,在接口测试中我们最常接触的HTTP协议,那 ...
- Intellij IDEA注册server
版权声明:本文为博主原创文章,未经博主允许不得转载.转载请注明来源:http://blog.csdn.net/mingjie1212.欢迎交流学习!对于Intellij IDEA 2016.3.4 ...
- React学习(一)父子组件通讯
React父子组件之间通讯,利用props和state完成,首先React是单向数据流,父组件可以向子组件传递props: 实现父子组件双向数据流整体的思路是: 1,父组件可以向子组件传递props, ...
- ST-1之乱码bug
我印象最深刻的一个错误就是乱码.上学期末做web期末作业时候,我就遇到了好多乱码问题.乱码问题并不是程序本身的逻辑错误,但是却让程序的可用性非常的差.只有输入英文时才能判断结果的正确与否.而且编译器又 ...
- python中从文件中读取数据
# average5.py def main(): fileName = input("What file are the numbers in?") infile = open( ...
- Docker - 容器直连
本文是在原文基础上的实际操作验证记录和细节补充. 默认情况下,容器连接到虚拟网桥docker0提供的虚拟子网中,容器之间通过默认网关(虚拟网桥docker0接口地址)建立连接. 如果不使用虚拟网桥,用 ...