在美团、淘宝、京东等网页上，有许多商品、服务评价页面，五星好评功能很常见，本文利用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. 使用jvisualvm的jstatd方式远程监控Java程序

    使用Java自带的jvisualvm调试Java程序,可以查看CPU.内存.类及线程等信息,还可以进行Dump,无疑是一个利器 由于客户端是Windows.服务端是Linux,并且是最小安装的Linu ...

  2. 132.1.001 Union-Find | 并查集

    @(132 - ACM | 算法) Algorithm | Coursera - by Robert Sedgewick > Tip: Focus on WHAT is really impor ...

  3. mac 打开整个系统的隐藏文件

    打开:defaults write com.apple.finder AppleShowAllFiles -bool true 关闭:defaults write com.apple.finder A ...

  4. [EntityFramework] 对 DateTime 类型使用 SQL 服务器时间或者字段默认值

    DateTime 类型在 SQL 服务器上如果设置了默认值,在 EntityFramework 添加新行的时候想使用该默认值,则不能对新增加的实体的 DateTime 字段赋值. 但是如果新增加的实体 ...

  5. September 02nd 2017 Week 35th Saturday

    Some things are more precious because they don't last long. 有些东西之所以弥足珍贵,是因为它们总是昙花一现. Life is ephemer ...

  6. 安装64位php开发环境

    最近听说PHP5.4速度很快,所以想建立一个本地环境测试下.我打算用本地windows xp sp3下安装PHP5.4.8.Apache2.4.3和Mysql5.5.28. 首先去下载PHP.Apac ...

  7. 通过 python-xmp-toolkit 读取图片xmlp信息

    这个模块使用很简单,下面是示例: file_name = '/path/to/xxx.JPG' from libxmp import XMPFiles, constsxmpfile = XMPFile ...

  8. Zeal——好用的离线 API 文档大全！

    介绍 作为一名程序员,工作中学习中免不了是要查询API文档的,毕竟我们能记住的东西有限,而且经常也会碰到某个API一时想不起来的情况,而每次还要打开网页去查询还是挺麻烦的,这时候拥有一个款好用的本地离 ...

  9. SQLServer创建链接服务器

    --SQLServer创建链接服务器----1.访问接口中Oracle接口 属性 选择 允许进程内-- --删除链接服务器EXEC master.dbo.sp_dropserver @server=N ...

  10. 1070. [SCOI2007]修车【费用流】

    Description 同一时刻有N位车主带着他们的爱车来到了汽车维修中心.维修中心共有M位技术人员,不同的技术人员对不同 的车进行维修所用的时间是不同的.现在需要安排这M位技术人员所维修的车及顺序, ...