效果:
//需求1:鼠标移动进去,前面的星星就会有颜色
//需求2:鼠标移出去,所有的星星没有颜色
//需求3:鼠标点击星星,前面的星星全部有颜色
<!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 type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
li{
float: left;
font-size: 40px;
margin-right: 5px;
}
span{
display: inline-block;
margin-top: 20px;
}
input{
display: inline-block;
width: 50px;
height: 30px;
}
</style>
<script src="jquery-3.4.1.js"></script>
<script type="text/javascript">
//需求1:鼠标移动进去,前面的星星就会有颜色
//需求2:鼠标移出去,所有的星星没有颜色
//需求3:鼠标点击星星,前面的星星全部有颜色
$(function(){
var kx_wjx = '☆';
var sx_wjx = '★';
$('ul>li').on('mouseenter',function(){
$(this).text(sx_wjx).prevAll().text(sx_wjx);
$(this).nextAll().text(kx_wjx);
}).on('mouseleave',function(){
$('ul>li').text(kx_wjx);
//获取刚刚点击的那个li
$('ul>li[current]').text(sx_wjx).prevAll().text(sx_wjx);
}).on('click',function(){
$(this).attr('current','currentWjx').siblings().removeAttr('current');
$(this).text(sx_wjx).prevAll().text(sx_wjx);
});
});
</script>
</head>
<body>
<ul>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
技巧&知识点:
jQuery的隐式迭代和链式编程的特点
prevAll(),之前所有的兄弟节点
nextAll(),之后所有的兄弟节点
siblings(),所有兄弟节点