The implementation of rating levels is similar to Taobao's special effects of good reviews and negative reviews. Click on different level icons to display the corresponding text. Let's take a look at the effect first.
After seeing the effect, I think everyone understands what I am going to say. Now I will show you the code
Finally, let’s take a look at the JS. The editor has noted all the comments above. It’s actually not difficult. The main thing is to deepen our understanding..
Copy code
The code is as follows:
$(function(){
$(".maxdiv div").bind("hover",function(){
$(this).attr("style","background:red");//Add style="background:red" to the current div;
$("div:last").prevAll().attr("style","background:red");//Add styles to everything;
$(this).nextAll().attr("style","");//All styles after the current div are "";
var dsize=$("div [style ='background:red']").size();//Get the number of all backgrounds containing style="background:red";
If(dsize==1)
{
$('span').text("Very bad");
}
else if(dsize==2)
{
$('span').text("Difference");
}
else if(dsize==3)
{
$('span').text("General");
}
else if(dsize==4)
{
$('span').text("Okay");
}
else if(dsize==5)
{
$('span').text("Very good");
}
});
});
My personal ability is limited, so the work is not very beautiful. Friends in need can take it and beautify it, haha.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
