可能标题没有说的太明白,这里先让大家看一下效果,以便让客官们了解小弟说的是什么...
看完效果后估计各位客官已经明白小弟说的是什么了吧,下面小弟就带大家看下代码
<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 });