<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/02/ 15:19-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: red;
}
.comment li {
float: left;
cursor: pointer;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
// 需求1: 鼠标移入到li标签上,当前li标签和他之前的li标签显示 实心五角心,后面的li显示 空心五角心.
// 需求2: 鼠标离开li,所有的li都变成空心.
// 需求3: 点击li,鼠标离开后,刚才点击的那个li和之前的li都变成 实心五角心,后面 空心五角心.
/**
* prev(): 上一个兄弟
* prevAll(): 之前所有的兄弟
* next(): 下一个兄弟
*/
// 声明一个变量, 记录这个实心五角星
var solid_star = '★';
var hollow_star = '☆';
// 给 li 注册 事件
$('.comment > li').on('mouseenter', function () {
// 需求1: 鼠标移入到li标签上,当前li标签和他之前的li标签显示 实心五角心,后面的li显示 空心五角心.
// $(this).text(solid_star).prevAll().text(solid_star).nextAll().text(hollow_star);
$(this).text(solid_star).prevAll().text(solid_star);
$(this).nextAll().text(hollow_star);
}).on('mouseleave', function () {
// 需求2: 鼠标离开li,所有的li都变成空心
$('.comment > li').text(hollow_star);
// 在鼠标离开的时候, 获取刚才点击的那个li
$('.comment > li[clickCurrent]').text(solid_star).prevAll(solid_star);
}).on('click', function () {
// 需求3: 点击li,鼠标离开后,刚才点击的那个li和之前的li都变成 实心五角心,后面 空心五角心
// 给鼠标当前点击的li做一个记号,为什么要做一个记号,是因为鼠标离开的时候,要知道你刚才点击的是哪一个li
// 给当前鼠标点击的这个li添加一个独一无二的属性
// 方式1: 通过索引, 可行
// 方式2: 给当前 鼠标点击的 li, 添加一个 独一无二的属性, 之后 可以通过这个属性来判断
$(this).attr('clickCurrent', 'current').siblings().removeAttr('clickCurrent');
});
});
</script>
</body>
</html>
