演示效果
代码
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>五星评分案例
</title
>
<script src
="js/jquery-3.5.1.min.js"></script
>
<script
>
$(function () {
$(".container>ul>li").mouseover(function () {
$(this).text("★").prevAll().text("★").end().nextAll().text("☆");
}).mouseout(function () {
$(".container>ul>li").text("☆");
$(".container>ul>li[index=10]").text("★").prevAll().text("★");
}).click(function () {
$(this).attr("index","10").siblings().removeAttr("index");
var ind
=$(this).index();
switch (ind
+1) {
case 1:$("#score").html("极差");
break;
case 2:$("#score").html("差");
break;
case 3:$("#score").html("良");
break;
case 4:$("#score").html("好");
break;
case 5:$("#score").html("非常好");
break;
}
});
});
</script
>
<style
>
*{
margin
: 0;
padding
: 0;
}
.container
{
width
: 300px
;
height
: 40px
;
position
: relative
;
margin
: 50px auto
;
line
-height
: 40px
;
font
-size
: 20px
;
}
.container ul
{
list
-style
: none
;
}
.container ul li
{
float
: left
;
font
-size
: 30px
;
color
: #e6b64c
;
}
</style
>
</head
>
<body
>
<div
class="container">
<ul
>
<li
>☆
</li
>
<li
>☆
</li
>
<li
>☆
</li
>
<li
>☆
</li
>
<li
>☆
</li
>
</ul
>
<span id
="score">请评分
</span
>
</div
>
</body
>
</html
>
Processed:
0.009, SQL:
10
