jQuery 五角星评分案例（详细代码）
时间：02-22来源：作者：点击数：
jQuery 五角星评分案例（详细代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: rgb(247, 10, 6);
}
.comment li {
float: left;
cursor: pointer;
}
ul {
list-style: none;
}
</style>
<script src="jquery-3.4.1.js"></script>
<script>
$(function () {
var wjx_none = '☆'; // 空心五角星
var wjx_sel = '★'; // 实心五角星
// 鼠标放上去当前的li和之前所有的li内容全部变为实心五角星，移开变为空心
$('.comment li').on('mouseenter', function () {
// 先让当前的变为实心
// $(this).text(wjx_sel).prevAll('li').text(wjx_sel);
// $(this).nextAll('li').text(wjx_none);
// 两行代码傻傻分不清的时候需要用 end() 结束之后在使用，也就相当于重新一行再次使用 this
$(this).text(wjx_sel).prevAll('li').text(wjx_sel).end().nextAll('li').text(wjx_none);
})
$('.comment li').on('mouseleave', function () {
if ($('li.current').length === 0) {
$('.comment li').text(wjx_none);
}else{
$('li.current').text(wjx_sel).prevAll('li').text(wjx_sel).end().nextAll('li').text(wjx_none);
}
})
$('.comment li').on('click', function () {
$(this).attr('class', 'current').siblings('li').removeAttr('class');
})
})
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
- demo 效果：
方便获取更多学习、工作、生活信息请关注本站微信公众号
湘公网安备 43102202000103号