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 相关文章推荐
js中判断文本框是否为空的两种方法
Jul 31 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
VueJS全面解析
Nov 10 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
Echarts.js无法引入问题解决方案
Oct 30 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
Zend Framework基本页面布局分析
2016/03/19 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
Javascript Object.extend
2010/05/18 Javascript
JQuery小知识
2010/10/15 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
深入研究React中setState源码
2017/11/17 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
微信小程序实现商品属性联动选择
2019/02/15 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
详细分析vue响应式原理
2020/06/22 Javascript
Python数据结构之图的应用示例
2018/05/11 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
成功的餐厅经营创业计划书
2014/01/15 职场文书
感恩教育活动总结
2014/05/05 职场文书
工会主席事迹材料
2014/06/03 职场文书
商务经理岗位职责
2014/08/03 职场文书
党员民主评议个人总结
2014/10/20 职场文书
违章停车检讨书
2014/10/21 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
客房部经理岗位职责
2015/02/02 职场文书
百万英镑观后感
2015/06/09 职场文书
2016年情人节广告语
2016/01/28 职场文书
导游词之青城山景区
2019/09/27 职场文书