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.
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..
$("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.