<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1910857_y8dn0jfbh0c.css">
<style>
.star {
font-size: 30px;
color: gold;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
let count = 10
let score = 5
for (let i = 0; i < count; i++) {
let star = $("<i/>").addClass('iconfont').addClass('star')
if (i < score) star.addClass('icon-xingxing1')
else star.addClass('icon-xingxing')
$('.container').append(star)
}
$('.star').mouseenter(function () {
let index = $(this).index()
$('.star').each(function (i) {
if (i <= index)
$(this).addClass('icon-xingxing1').removeClass('icon-xingxing')
else
$(this).addClass('icon-xingxing').removeClass('icon-xingxing1')
})
})
$('.star').mouseleave(function () {
$('.star').each(function (i) {
if (i < score)
$(this).addClass('icon-xingxing1').removeClass('icon-xingxing')
else
$(this).addClass('icon-xingxing').removeClass('icon-xingxing1')
})
})
$('.star').click(function () {
score = $(this).index() + 1
})
})
</script>
</body>
</html>
