평가 수준의 구현은 타오바오의 좋은 리뷰와 부정적인 리뷰의 특수 효과와 유사합니다. 다양한 수준의 아이콘을 클릭하면 해당 텍스트가 표시됩니다.
효과를 보시면 다들 제 말을 이해하셨을 것 같습니다. 이제 코드를 보여드리겠습니다
.maxdiv div{
높이:10px;
너비:20px;
테두리:1px 실선 #000;
부동:왼쪽;
여백: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("매우 좋음");
}
});
});
개인 능력이 부족해서 작품이 별로 아름답지 않네요. 필요한 친구들이 찍어서 예쁘게 만들어도 되겠죠, 하하.