jQuery 实现评论等级好评差评特效


Posted in Javascript onMay 06, 2016

实现评分等级,就类似于淘宝的好评差评特效,点击不同的等级图标显示相应的文字,先来看下效果。

jQuery 实现评论等级好评差评特效

看完效果后估计大家都明白我要说的是什么了吧,下面小编就带大家看下代码

<style>

        .maxdiv div{

            height:10px;

            width:20px;

            border:1px solid #000;

            float:left;

            margin:20px 2px 0px 5px;

        }

</style>
<div class="maxdiv">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

    </div>

<span></span>

最后大家看下JS 上边小编已经把注释都注上了,其实也不难,主要是加深理解..

$(function(){

    $(".maxdiv div").bind("hover",function(){

        $(this).attr("style","background:red");//当前div加上style="background:red";

        $("div:last").prevAll().attr("style","background:red");//给所有的都加上样式;

        $(this).nextAll().attr("style","");//当前div后的所有所有样式都为"";

        var dsize=$("div [style ='background:red']").size();//获得所有背景含有style="background:red"的个数;

        if(dsize==1)

        {

        $('span').text("很差");

        }

        else if(dsize==2)

        {

        $('span').text("差");

        }

        else if(dsize==3)

        {

        $('span').text("一般");

        }

        else if(dsize==4)

        {

        $('span').text("好");

        }

        else if(dsize==5)

        {

        $('span').text("很好");

        }

    });

});

个人能力有限,做的不是太美观,有需要的朋友可以拿去再美化一下,呵呵。

Javascript 相关文章推荐
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
Node.js插件安装图文教程
May 06 #Javascript
node.js插件nodeclipse安装图文教程
Oct 19 #Javascript
javascript实现平滑无缝滚动
Aug 09 #Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 #Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 #Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 #Javascript
jquery实现全选功能效果的实现代码
May 05 #Javascript
You might like
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
Python ldap实现登录实例代码
2016/09/30 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
python类共享变量操作
2020/09/03 Python
python爬取天气数据的实例详解
2020/11/20 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
出纳的岗位职责
2013/11/09 职场文书
网络维护管理员的自我评价分享
2013/11/11 职场文书
邮政员工辞职信
2014/01/16 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
社区活动策划方案
2014/08/21 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
Mysql基础之常见函数
2021/04/22 MySQL