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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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 广告调用类代码(支持Flash调用)
2011/08/11 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
vue实现一拉到底的滑动验证
2019/07/25 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Python实现的快速排序算法详解
2017/08/01 Python
详谈python read readline readlines的区别
2017/09/22 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
跟单业务员岗位职责
2014/03/08 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
请假条的格式
2014/04/11 职场文书
无房证明范本
2014/09/17 职场文书
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript