超级简单的评分功能,分为四个步骤轻松搞定:

第一步:

  引入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纯手写的更多相关文章

  1. 超级简单的jQuery纯手写五星评分效果

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  2. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  3. springmvc 动态代理 JDK实现与模拟JDK纯手写实现。

    首先明白 动态代理和静态代理的区别: 静态代理:①持有被代理类的引用  ② 代理类一开始就被加载到内存中了(非常重要) 动态代理:JDK中的动态代理中的代理类是动态生成的.并且生成的动态代理类为$Pr ...

  4. 纯手写Myatis框架

    1.接口层-和数据库交互的方式 MyBatis和数据库的交互有两种方式: 使用传统的MyBatis提供的API: 使用Mapper接口: 2.使用Mapper接口 MyBatis 将配置文件中的每一个 ...

  5. SQL纯手写创建数据库到表内内容

    建表啥的只点点鼠标,太外行了,不如来看看我的纯手写,让表从无到有一系列:还有存储过程临时表,不间断的重排序: 一:建数据库 create Database Show on primary ( name ...

  6. 纯手写SpringMVC到SpringBoot框架项目实战

    引言 Spring Boot其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 通过这种方式,springboot ...

  7. [jQuery插件]手写一个图片懒加载实现

    教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...

  8. 纯手写实现ajax分页功能

    前言 最近用到了这个功能,百度大半天,网上的不是有各种问题就是需要引入其他的插件,无奈,只能自己写,大致功能已经完成.前端页面用bootstrap做样式,分页功能用ajax实现,没用其他插件哦,只引入 ...

  9. 纯手写SpringMVC架构,用注解实现springmvc过程

    1.第一步,首先搭建如下架构,其中,annotation中放置自己编写的注解,主要包括service controller qualifier RequestMapping 第二步:完成对应的anno ...

随机推荐

  1. delphi 7 mdi子窗体。。。无法更改以命令对象为源的记录集对象的 ActiveConnection 属性。

    问题是这样的 我做了一个小程序 把 adoconnection放到了主窗体  连接的是access数据库; 新建了一个子窗体继承自FBase  新建了一个pubulic方法 qrySearch 实现了 ...

  2. Kindle PaperWhite3 越狱和PDF插件的安装

    下载所需工具 这里分享的文件是这个教程中所需要的所有文件 所有工具下载链接:http://pan.baidu.com/s/1c249P2S 密码:ozc7 一.准备工作 本越狱方法仅适用于 KO.KV ...

  3. 光场相机重聚焦之三——Matlab光场工具包使用、重聚焦及多视角效果展示

    这一小节说一下Matlab光场工具包的使用,展示重聚焦和多视角的效果. 从Lytro illum中导出的raw数据为.lfp格式的光场图像文件(约52M大小),该文件包含以下几部分:光场图像数据raw ...

  4. Linux -atime、mtime、ctime

    Linux中,文件都有其自身的atime.mtime.ctime,在不同的命令下,各时间发生相应的改变.下面,我们来简单的介绍一下: atime (access time):表示最后一次访问文件或目录 ...

  5. UE4 Fade out Mesh

    由于项目需要一个将场景慢慢淡入以及淡出的效果,所以就想了想实现思路.因为PBR光照模型是不支持透明物体的渲染的,所以UE4中的PBR材质在为Opaque时是无法改变透明度的,想来想去想不出解决方法,然 ...

  6. qq面板(仿版,未完待续中。。。。)---2017-04-24

    主要实现效果: 1.点击对话,显示对话:点击联系人,显示联系人 2.在联系人界面: 实现好友列表的展开与折叠:(图12) 实现鼠标移到好友列表上的背景颜色的变化:(图3) 选中的好友背景颜色改变(图4 ...

  7. 关于div+css布局值得注意的地方

    注意项 我们知道,如果想要两个 div(即块级元素)挨着一起排列,可以将其设置为inline-block(行内-块元素). 不过要注意两个div内的内容的对齐方式将是垂直中间对齐,所以这时候就需要使用 ...

  8. webapp万能选择器:iosselect

    iosselect是个什么东西? 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个选择器组件来统一各端下各种浏览器的展示.下面是 ...

  9. Express - 入门

    Express入门篇 1.HelloWorld  根目录新建server.js文件,插入代码: var express = require('express'); var app = express( ...

  10. 蓝桥杯-有奖猜谜-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...