在美团、淘宝、京东等网页上，有许多商品、服务评价页面，五星好评功能很常见，本文利用jQuery实现五星好评功能。

案例图片：

                                       

案例需求：

如左图所示，鼠标进入某个五角星，该五角星包括之前的五角星全部变成黄色。

鼠标离开后，变成黄色的恢复原状

当鼠标在某个五角星上点击的时候，该五角星和其之前的五角星全部变成黄色，鼠标离开后，颜色也不会恢复过来。

实现思路：

①获取所有的li（五角星全部存在于li标签中），给$(this)注册mouseover、mouseout、click事件

②mouseover事件中，将当前和前面的五角星变成黄色

$(this).text("★").prevAll("li").text("★")；

③click事件中，给当前点击的li五角星赋予index属性，方便在鼠标滑出的时候，能够保存点击时候五角星及之前五角星的状态，同时清除其他所有的li的index属性

$(this).attr("index",1).siblings("li").removeAttr();

④mouseout事件中，所有的li变为空白，但是属性index有值的li及其前面的li变为黄色

$(this).text("☆").siblings().text("☆")；

　 $( " li [indx=1] ").text("★").prevAll().text("★")；

代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style type="text/css">

             ul {

                 list-style: none;

             }

             li {

                 float: left;

                 font-size: 39px;

                 color: yellow;

             }

         </style>

         <script src="jquery-1.12.2.js"></script>

         <script type="text/javascript">

             $(function(){

                 //获取所有的li,注册鼠标移入事件

                 $("li").mouseover(function(){

                     $(this).text("★").prevAll().text("★");

                 }).mouseout(function(){

                     $(this).text("☆").siblings().text("☆");

                     $("li[index=1]").text("★").prevAll().text("★");

                 }).click(function(){

                     $(this).attr("index",1).siblings().removeAttr();

                 });

             });

         </script>

     </head>

     <body>

         <ul>

             <li>☆</li>

             <li>☆</li>

             <li>☆</li>

             <li>☆</li>

             <li>☆</li>

         </ul>

     </body>

 </html>

jQuery----五星好评实现的更多相关文章

  1. 如何用jQuery实现五星好评

    jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面来就可以了. 接下 ...

  2. jQuery实现简单的五星好评

    最近一直在认真的努力工作,今天工作完成得差不多了,比较轻松点,在工作中有遇到用jq实现五星好评功能,觉得简单又有用,所以空闲时间就想分享出来. css部分: <style> .u_star ...

  3. js五星好评

    一般我们在一些购物以及美食的网站都会看到五星好评之类的,一下是使用js制作的五星好评! <!DOCTYPE html> <html lang="en"> & ...

  4. 亲，麻烦给个五星好评！—RatingBar

    引言 上一篇的CheckBox已经让大家越来越接近实战演练了,本章我们继续分享干货给大家,今天介绍一个实用的UI控件RatingBar(星级评分条),对于使用过电商APP(某东,某宝等)的小伙伴们来说 ...

  5. jquery 五星评价(图片实现)

    1111 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  6. python爬虫06 | 你的第一个爬虫，爬取当当网 Top 500 本五星好评书籍

    来啦,老弟 我们已经知道怎么使用 Requests 进行各种请求骚操作 也知道了对服务器返回的数据如何使用 正则表达式 来过滤我们想要的内容 ... 那么接下来 我们就使用 requests 和 re ...

  7. UWP 五星好评

    var pfn = Package.Current.Id.FamilyName; await Launcher.LaunchUriAsync(new Uri("ms-windows-stor ...

  8. JQ五星好评效果

    $(".list-txt ul").find("li").click(function(){    if($(this).index()==0){       ...

  9. js五星好评2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. python爬虫06取当当网 Top 500 本五星好评书籍

    主要思路 使用 page 变量来实现翻页 我们使用 requests 请求当当网 然后将返回的 HTML 进行正则解析 由于我们暂时还没学到数据库 所以解析完之后就把内容存到文件中 def main( ...

随机推荐

  1. Google zxing实现二维码扫描完美解决方案

    最近因项目需求,需要在App中集成二维码扫描的功能.网上找了很多资料,最后决定使用Google的zxing来实现.实现的过程遇到了很多的坑,也是因为这些坑在网上没有具体的解决方案,今天就把我的实现过程 ...

  2. redis 数据淘汰策略与配置

    redis 数据淘汰策略 volatile-lru:从已设置过期的数据集中挑选最近最少使用的淘汰volatile-ttr:从已设置过期的数据集中挑选将要过期的数据淘汰volatile-random:从 ...

  3. Oracle EBS 启动调试日志

    SELECT   * FROM dba_source t WHERE t.TEXT LIKE '%PO_PDOI_TAX_CALCULATION_ERR%' FND:启用调试日志 FND:调试日志级别 ...

  4. Oracle EBS 加锁解锁程序

    FUNCTION request_lock(p_lock_name IN VARCHAR2) RETURN BOOLEAN IS l_lock_name ); l_lock_ret INTEGER; ...

  5. 要提高SQL查询效率where语句条件的先后次序应如何写

    我们要做到不但会写SQL,还要做到写出性能优良的SQL语句. (1)选择最有效率的表名顺序(只在基于规则的优化器中有效): Oracle的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句 ...

  6. VMware 11 安装苹果系统

    没事研究了一下虚拟机安装苹果系统 1.下载需要的软件- F, c1 X: e- o1 }& V/ o9 J        1.1 VMware 11 下载和安装* P( R; O6 v1 N! ...

  7. Bootstrap后台管理框架

    B-JUI http://www.xknaan.com/ B-JUI 前端框架,基于Bootstrap的Jquery UI框架,核心思想脱胎于DWZ(j-ui).   BJUI_SSM_DEMO 基于 ...

  8. centos7.4应用之KVM

    最小安装系统: 参考博客:https://www.cnblogs.com/chenjiahe/p/5911965.html 辅助命令 yum install make bison flex autom ...

  9. 一、HTML概述 二、web相关的概念 三、HTML的常用标签

    一.HTML概述###<1>概念 HTML:Hypertext Markup Language,超文本 标记语言,用来描述网页的一种语言. 非编程语言,由浏览器直接解释运行. ###< ...

  10. November 5th Week 45th Saturday 2016

    The longest day has an end. 最难过的日子也会有尽头. No, no, no, I can't see the end of such days, of course, if ...