鼠标的移入移出事件
mouseover和mouseenter都是鼠标移到元素身上就触发，区别是
- mouseover鼠标移入元素或其子元素均会触发事件，导致重复触发，拥有冒泡特性。对应移出事件是 mouseout
- mouseenter鼠标移出元素本身（不包含元素的子元素）会触发事件，没有冒泡特性。对应的移出事件是mouseleave
界面设计
<!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="js/jquery-3.6.4.min.js"></script>
<script>
</script>
</body>
</html>
JS实现
// prev(); 上一个兄弟; prevAll(); 之前所有的兄弟
// next(); 下一个兄弟; nextAll(); 之后所有的兄弟
// siblings() 同级别下的其他兄弟元素 同级元素是共享相同父元素的元素。
$(function ($) {
// 声明两个个变量,分别记录这个实心|空心五角心.
let sx_wjx = '★';
let kx_wjx = '☆';
// 需求1: 当前鼠标移入的li和他之前的兄弟li都显示实心五角心.
$(".comment li").on('mouseenter', function(){
$(this).text(sx_wjx).prevAll().text(sx_wjx);
// 当前鼠标移入的li之后的兄弟li都显示空心五角心.
$(this).nextAll().text(kx_wjx);
// 发现无法连着书写
// $(this).text(sx_wjx).prevAll().text(sx_wjx).nextAll().text(kx_wjx);
// 此时可以利用end方法
// 该方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
// 简单理解 相当于 就是返回到 $(this) 对象了
// $(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);
}).on('mouseleave', function(){
// 需求2:鼠标离开li,所有的li都变成空心.
$(".comment li").text( kx_wjx );
// 获取刚才点击的那个li.
$(".comment li[clickCurrent=current]").text(sx_wjx).prevAll().text(sx_wjx);
}).on('click', function(){
// 需求3:点击li,鼠标离开后,刚才点击的那个li和之前的li都变成实心五角心,后面空心五角心.
// 给鼠标当前点击的li做一个记号,为什么要做一个记号,是因为鼠标离开的时候,要知道你刚才点击的是哪一个li.
// 给当前鼠标点击的这个li添加一个自定义的独一无二属性.
$(this).attr("clickCurrent", 'current').siblings().removeAttr("clickCurrent");
})
})
效果展示
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
