在美团、淘宝、京东等网页上，有许多商品、服务评价页面，五星好评功能很常见，本文利用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. apache ftp server的简单入门(java应用内嵌ftp server)

    Apache Ftp Server:(强调) Apache Ftp Server 是100%纯Java的FTP服务器软件,它采用MINA网络框架开发具有非常好的性能.Apache FtpServer ...

  2. mysql常用语句备忘

    1.连接本地数据库 mysql -h localhost -u root -p123 2.连接远程数据库 mysql -h 192.168.0.201 -P 3306 -u root -p123 3. ...

  3. 通过windows powershell 修改 Office 365默认的 35MB 的邮件大小限制

    附件下载: 通过windows powershell 修改 Office 365默认的 35MB 的邮件大小限制

  4. 第八章 SQL高级处理 8-2 GROUPING运算符

    一.同时得到合计行 合计行是不指定聚合键时得到的汇总结果. UNION ALL与UNION的不同之处是它不会对结果进行排序,因此比UNION性能更好.   二.ROLLUP——同时得出合计和小计 GR ...

  5. ubuntu-15.04-desktop-amd64想要安装KDE桌面，结果出现如下问题

    The following packages have unmet dependencies: kubuntu-desktop : Depends: ark but it is not going t ...

  6. 点击单个cell高度变化的动画效果

    点击单个cell高度变化的动画效果 效果 说明 1. 点击单个cell的时候,其展开与缩放动画实现起来是很麻烦的,做过相关需求的朋友一定知道其中的坑 2. 本例子只是提供了一个解决方案,为了简化操作, ...

  7. [翻译] SSKeychain

    SSKeychain https://github.com/soffes/sskeychain SSKeychain is a simple wrapper for accessing account ...

  8. Redis学习---Redis操作之List

    List操作,redis中的List在在内存中按照一个name对应一个List来存储 lpush(name,values) --> 实际上是左添加 # 在name对应的list中添加元素,每个新 ...

  9. 铁乐学python26_hashlib+configparser+logging模块

    大部份内容摘自博客http://www.cnblogs.com/Eva-J/ hashlib模块算法介绍 Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 什么是摘要算法呢? ...

  10. Spring Boot Mybatis-Plus

    Mybatis-Plus 是对 Mybatis-Plus 的一些扩充. 在 Spring Boot 中进行集成的时候其实基本上和 mybatis 是一致的. 在你的配置文件中.配置 你的 entity ...