jquery实现五角星评分案例_jquery五角星评分案例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45056878/article/details/115370011

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.all{
				list-style: none;
				font-size: 50px;
			}
			.all>li{
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<ul class="all">
			<li>☆</li>
			<li>☆</li>
			<li>☆</li>
			<li>☆</li>
			<li>☆</li>
		</ul>
	</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
	$(function(){
		//prev查找上一个兄弟，prevAll查找上面所有的兄弟
		//next查找下一个兄弟，nextAll查找后面所有的兄弟
		var sx_wjx = '★';
		var kx_wjx = '☆';
		$('.all>li').on('mouseenter',function(){
			//$(this).text(sx_wjx).prevAll().text(sx_wjx);
			//$(this).nextAll().text(kx_wjx);
			//使用end方法返回上一个状态
			$(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx)
		}).on('mouseleave',function(){
			$('.all>li').text(kx_wjx);
			//给标记的五角星以及之前的五角星变为实心
			$('.all>li[biaoji]').text(sx_wjx).prevAll().text(sx_wjx);
		}).on('click',function(){
			//给要点击的li做一个标记，attr添加属性
			$(this).attr('biaoji','aaa').siblings().removeAttr('biaoji');
		})
	})
</script>