jQuery はレビュー評価、良いレビュー、悪いレビューの特殊効果を実装します_jquery

評価レベルの実装は、淘宝網の良いレビューと否定的なレビューの特殊効果に似ています。異なるレベルのアイコンをクリックすると、対応するテキストが表示されます。

効果を見て、皆さんも私が言おうとしていることを理解できたと思います。次にコードをお見せします。

コードをコピーします コードは次のとおりです:

.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("とても良い");
}
});
});



私の個人的な能力には限界があるので、必要としている友人がそれを受け取って美化することができますが、作品はあまり美しくありません（笑）。