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

第一步：

　　引入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. Numpy实现简单BP神经网络识别手写数字

    本文将用Numpy实现简单BP神经网络完成对手写数字图片的识别,数据集为42000张带标签的28x28像素手写数字图像.在计算机完成对手写数字图片的识别过程中,代表图片的28x28=764个像素的特征 ...

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

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

  8. 简单HOG+SVM mnist手写数字分类

    使用工具 :VS2013 + OpenCV 3.1 数据集:minst 训练数据:60000张 测试数据:10000张 输出模型:HOG_SVM_DATA.xml 数据准备 train-images- ...

  9. 五星评分效果 原生js

    五星评分在很多地方都可以用到,网上也有插件或者相应的代码,在这里我给大家提供一款我自己写的超级简单实用的五星评分代码,连图片都不需要 <!-- 评分start --> <ul> ...

随机推荐

  1. CF914E Palindromes in a Tree(点分治)

    link 题目大意:给定一个n个点的树,每个点都有一个字符(a-t,20个字符) 我们称一个路径是神犇的,当这个路径上所有点的字母的某个排列是回文 求出对于每个点,求出经过他的神犇路径的数量 题解: ...

  2. Python之freshman05

    一:内建模块 time和datetime(http://www.jb51.net/article/49326.htm) 在Python中,通常有这几种方式来表示时间:1)时间戳 2)格式化的时间字符串 ...

  3. urlencode编码问题（以及urlparse） 转

    网址链接中的中文编码 中文的gbk(GB2312)编码: 一个汉字对应两组%xx,即%xx%xx 中文的UTF-8编码: 一个汉字对应三组%xx,即%xx%xx%xx 可以利用百度进行URL编码解码 ...

  4. JAVA数据结构--ArrayList动态数组

    在计算机科学中,动态数组,可扩展数组,可调整数组,动态表,可变数组或数组列表是一种随机存取可变大小列表数据结构,允许添加或删除元素.它提供许多现代主流编程语言的标准库.动态数组克服了静态数组的限制,静 ...

  5. React应用程序设计过程中如何区分模块到底是state还是props？

    根据官方文档,满足以下任意条件的模块,就不是State,原文如下: 1.Is it passed in from a parent via props? If so, it probably isn’ ...

  6. bzoj1079 着色方案 记忆化搜索（dp）

    题目传送门 题目大意: 有k种颜色,每个颜色ci可以涂个格子,要求相邻格子颜色不能一样,求方案数.ci<=5,k<=15. 思路: 题目里最重要的限制条件是相邻格子颜色不能相同,也就是当前 ...

  7. 119th LeetCode Weekly Contest Subarray Sums Divisible by K

    Given an array A of integers, return the number of (contiguous, non-empty) subarrays that have a sum ...

  8. HihoCoder - 1048 状压DP 经典题

    hihocoder题解说的十分清晰了,这份代码就是从讲解里学习的 方案数就是不断枚举合法状态下横放竖放或两者均可 合法判断的依据是记录当前行和下一行的状态 防止重复枚举的方法是先按行后按列 递归基瞎写 ...

  9. scraoy之日志等级处理

    一.Scrapy的日志等级 - 在使用scrapy crawl spiderFileName运行程序时,在终端里打印输出的就是scrapy的日志信息. - 日志信息的种类: ERROR : 一般错误 ...

  10. malloc的可重入性和线程安全分析

    malloc函数是一个我们经常使用的函数,如果不对会造成一些潜在的问题.下面就malloc函数的线程安全性和可重入性做一些分析. 我们知道一个函数要做到线程安全,需要解决多个线程调用函数时访问共享资源 ...