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 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
初识JQuery 实例一(first)
Mar 16 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
JS快速实现简单计算器
Apr 08 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在字符串中查找另一个字符串
2008/11/19 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
Python yield使用方法示例
2013/12/04 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
python实现五子棋小程序
2019/06/18 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
简历中的自我评价范文
2014/02/05 职场文书
实验室标语
2014/06/21 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
Python经常使用的一些内置函数
2022/04/11 Python