zoukankan      html  css  js  c++  java
  • jquery 评论等级(很差,差,一般,好,很好)代码

    可能标题没有说的太明白,这里先让大家看一下效果,以便让客官们了解小弟说的是什么...

    看完效果后估计各位客官已经明白小弟说的是什么了吧,下面小弟就带大家看下代码

    <style>
            .maxdiv div{
                height:10px;
                width:20px;
                border:1px solid #000;
                float:left;
                margin:20px 2px 0px 5px;
            }
    </style>
    1 <div class="maxdiv">
    2         <div></div>
    3         <div></div>
    4         <div></div>
    5         <div></div>
    6         <div></div>
    7     </div>
    8 <span></span>

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

     1 $(function(){
     2             $(".maxdiv div").bind("hover",function(){
     3                 $(this).attr("style","background:red");//当前div加上style="background:red";
     4                 $("div:last").prevAll().attr("style","background:red");//给所有的都加上样式;
     5                 $(this).nextAll().attr("style","");//当前div后的所有所有样式都为"";
     6                 var dsize=$("div [style ='background:red']").size();//获得所有背景含有style="background:red"的个数;
     7                 if(dsize==1)
     8                 {
     9                 $('span').text("很差");
    10                 }
    11                 else if(dsize==2)
    12                 {
    13                 $('span').text("差");
    14                 }
    15                 else if(dsize==3)
    16                 {
    17                 $('span').text("一般");
    18                 }
    19                 else if(dsize==4)
    20                 {
    21                 $('span').text("好");
    22                 }
    23                 else if(dsize==5)
    24                 {
    25                 $('span').text("很好");
    26                 }
    27             });
    28         });
  • 相关阅读:
    vue-cli生成的重要代码详解
    vuex初探
    vue-router笔记
    新技术的学习
    图片优化方法(有时间看看)
    关于老教授之家项目的思考 && 中国互联网+大赛培训
    If you are tired...
    微信公众平台开发初探
    winscp介绍与使用
    获取当前服务器信息
  • 原文地址:https://www.cnblogs.com/dandanwozhishidan/p/3560913.html
Copyright © 2011-2022 走看看