評価レベルの実装は、淘宝網の良いレビューと否定的なレビューの特殊効果に似ています。異なるレベルのアイコンをクリックすると、対応するテキストが表示されます。
効果を見て、皆さんも私が言おうとしていることを理解できたと思います。次にコードをお見せします。
.maxdiv div{
高さ:10px;
width:20px;
border:1px ソリッド #000;
float:left;
margin:20px 2px 0px 5px;
}
最後に、JS を見てみましょう。編集者は上記のすべてのコメントに注意しました。重要なのは、理解を深めていくことです。
コードをコピーします
コードは次のとおりです:
$(関数(){
$(".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("とても良い");
}
});
});
私の個人的な能力には限界があるので、必要としている友人がそれを受け取って美化することができますが、作品はあまり美しくありません（笑）。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
