jQuery五角星评分（end方法）
2022-03-18 本文已影响0人
马佳乐
当鼠标移入空心五角星时，该五角星和其前面的五角星变成实心。鼠标离开时，所有五角星为空心。
当鼠标点击某一空心五角星时，该五角星和其前面的五角星变为实心的。鼠标离开，保持不变。
代码：
<!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;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
<script src="js/jquery.js"></script>
<script>
$(function() {
//1. 给li注册鼠标经过事件，让自己和前面所有的兄弟都变成实心，后面的li为空心
var wjx_k = "☆";
var wjx_s = "★";
$(".comment>li").on("mouseenter", function() {
// //让自己和前面所有的兄弟都变成实心
// $(this).text(wjx_s).prevAll().text(wjx_s);
// //后面的li为空心
// $(this).nextAll().text(wjx_k);
//与上面代码等价
$(this).text(wjx_s).prevAll().text(wjx_s).end().nextAll().text(wjx_k);
});
//2. 给ul注册鼠标离开事件，让所有的li都变成空心
$(".comment>li").on("mouseleave", function() {
$(".comment>li").text(wjx_k);
//点击事件又离开的事件，找到current，让current和current前面的变成实心就行。
$("li.current").text(wjx_s).prevAll().text(wjx_s);
});
//3. 给li注册点击事件
$(".comment>li").on("click", function() {
$(this).addClass("current").siblings().removeClass("current");
});
});
</script>
