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

第一步：

　　引入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. 国付宝ecshop,shopex,shopnc在线支付接口，php版本支付接口开发

    最近应一个客户的要求,给他的一个ecshop商城开发国付宝在线支付接口.国付宝估计大家比较陌生,但是他集成了很多银行的一些网银接口,所以比较方便.号称国家级的第三方支付平台.最近有增加了域名验证,就是 ...

  2. javascript数组常用方法详解

    1,splice().   array.splice(index,many,list1,list2....)  参数1.index位置 负数为从结尾处算,倒数第一为-1:参数2,many要删除的项目, ...

  3. shell脚本基本知识点

    Shell 是一个用C语言编写的程序,它是用户使用Linux的桥梁.用户通过这个界面访问Linux操作系统内核的服务.Shell既是一种命令语言,又是一种程序设计语言. 1.Shell 环境 Shel ...

  4. 【转载】GPIO模拟i2c通信

    I2C总线的通信过程(见图4-8)主要包含三个主要阶段:起始阶段.数据传输阶段和终止阶段. 1. 起始阶段 在I2C总线不工作的情况下,SDA(数据线)和SCL(时钟线)上的信号均为高电平.如果此时主 ...

  5. 2017-4-26 winform 菜单和工具栏

    如何让radiobutton进行分组: 用Panel    相当于div 菜单和工具栏: MenuStrip(菜单条) ShortcutKeys-------------------------与菜单 ...

  6. JS 部分基础内容总结

    JavaScript 是脚本语言 HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 <body> ...

  7. [ext4] 磁盘布局 - extent tree

    传统的类Unix文件系统,比如Ext3,都是使用一个间接数据块映射表来记录每一个数据块的分配情况的.但是这种机制对于超大文件的存储是有缺陷的,特别是当对超大文件进行删除和截断操作时.映射表会对每一个数 ...

  8. Mysql PHP

    if(_mysql.query(sql.data()) < 0) 这里不能使用sql.c_str() 因为这个会有‘\0’而在Mysql查询中,这个0是不希望出现的.

  9. 什么是体数据可视化(Volume data visualization)？及体绘制的各种算法和技术的特点？

    该文对体数据进行综述,并介绍了体数据的各种算法和技术的特点. 前言 由于3D数据采集领域的高速发展,以及在具有交互式帧率的现代化工作站上执行高级可视化的可能性,体数据的重要性将继续迅速增长. 数据集可 ...

  10. poj3320尺取法

    Jessica's a very lovely girl wooed by lots of boys. Recently she has a problem. The final exam is co ...