前端学习日记：jquery的preAll-nextAll-attr-sibling-removeAttr实现五角星评分案例

最新推荐文章于 2022-09-13 08:40:48 发布

Stephen·You

最新推荐文章于 2022-09-13 08:40:48 发布

阅读量278

点赞数

分类专栏：前端文章标签：前端学习日记

本文链接：https://blog.csdn.net/weixin_42585386/article/details/102506990

版权

前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

.comment {
font-size: 40px;
color: #ff3100;
}

.comment li {
float: left;
cursor: pointer;
}

ul {
list-style: none;
}
</style>
<script src="JavaScript/jquery-1.11.1.js"></script>
<script>
$(function () {
var wjx_none = '☆'; // 空心五角星
var wjx_sel = '★'; // 实心五角星

//需求1：鼠标放上去当前的li和之前所有的li内容全部变为实心五角星，点击后记录该状态，移开后状态不变。
//在鼠标放入事件中放入两个事件：
$(".comment li").on("mouseenter", function () {
//当前五角星，和之前的所有五角星，全部是实心的，其他的为空心

// prevAll("元素")/nextAll("元素"):获取排在当前对象前面/后面的所有兄弟元素

// $(this).text(wjx_sel).prevAll("li").text(wjx_sel);
// $(this).nextAll("li").text(wjx_none);
// end();结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。
$(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);

$(".comment li").on("mouseleave", function () {
//bug：如果没有点击过li，那么会出现无法清除实心五角星的现象，处理办法就是先判断，看看是否有current类
if($("li.current").length === 0){
$(".comment li").text(wjx_none);
}else{
//当鼠标移开的时候，谁有current类名，那么当前和之前所有的li前部是实心五角星，后面的所有li都是空心
$("li.current").text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
}
});

//需求2：鼠标点击的那个li和之前所有的li都变成实心五角星，其他变为空心。
$(".comment li").on("click", function () {
//点击哪个li给他加一个类名。清空其他所有的li的类名
$(this).attr("class","current").siblings("li").removeAttr("class");
});

});

});
</script>
</head>

<body>

</body>