在美团、淘宝、京东等网页上，有许多商品、服务评价页面，五星好评功能很常见，本文利用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. python 字符串格式化符号含义及注释

    字符串格式化符号含义 符号 说明 %C 格式化字符及其ASCII码 %S 格式化字符串 %d 格式化整数 %o 格式化无符号八进制数 %x 格式化无符号十六进制数 %X 格式化无符号十六进制数(大写) ...

  2. oracle 企业管理器及无线网环境下配置方法

    注意: oracle em 的访问地址在 D:\oracle\product\11.2.0\dbhome_1\install 下的文件里. 如果在windows 安装oracle,并且在本地访问,or ...

  3. Oracle存储过程简单实例

    转自 http://www.cnblogs.com/nicholas_f/articles/1526029.html /*不带任何参数存储过程(输出系统日期)*/create or replace p ...

  4. 7.Spring MVC静态资源访问

    在SpringMVC中常用的就是Controller与View.但是我们常常会需要访问静态资源,如html,js,css,image等. 默认的访问的URL都会被DispatcherServlet所拦 ...

  5. python apache下出现The _imaging C module is not installed

    操作系统:win7 64位 安装python版本 win32 2.7版本 安装的PIL插件PIL-1.1.7.win32-py2.7.exe 用本地自带的开发服务器上传图片处理等一切正常 放到APAC ...

  6. Oracle ALL DBA表

    select * from all_tab_comments -- 查询所有用户的表,视图等 select * from user_tab_comments -- 查询本用户的表,视图等 select ...

  7. python已写内容中可能的报错及解决办法

    理论上我发的每个短文,直接复制放到py里面,python xx.py是可以执行的,不过因为版本,编码什么的问题会有报错,详见这里 报错: SyntaxError: Non-ASCII characte ...

  8. 什么时候会执行viewDidLoad方法

    什么时候会执行viewDidLoad方法 这个博文是为了解释,为何有时候,你给属性赋值,在viewDidLoad方法中却取不到值的原因. 第一种情况,presentViewController会执行被 ...

  9. WinPE ISO制作

    1.安装ADK,然后导出winPE镜像文件和启动文件: 打开 部署和映像工具环境,cd "Windows Preinstallation Environment",运行 copyp ...

  10. python2.7下同步华为云照片的爬虫程序实现

    1.背景 随着华为手机的销量加大,华为云的捆绑服务使用量也越来越广泛,华为云支持自动同步照片.通讯录.记事本等,用着确实也挺方便的,云服务带来方便的同时,也带来了数据管理风险.华为目前只提供一个www ...