jQ实现星星评分

最新推荐文章于 2022-09-27 16:32:53 发布

Alicesa

最新推荐文章于 2022-09-27 16:32:53 发布

阅读量766

点赞数 1

分类专栏：前端jQuery 文章标签： jquery css

本文链接：https://blog.csdn.net/Alicesa/article/details/108297890

版权

前端jQuery 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="fontawesome-free-5.11.2-web/css/all.css"/>

	</head>

	<body>
		<h1>浮动效果</h1>
		<i class="fas fa-star"></i>
		<i class="fas fa-star"></i>
		<i class="fas fa-star"></i>
		<i class="fas fa-star"></i>
		<i class="fas fa-star"></i><label></label>
		<h2>点击效果</h2>
		<li class="fas fa-star"></li>
		<li class="fas fa-star"></li>
		<li class="fas fa-star"></li>
		<li class="fas fa-star"></li>
		<li class="fas fa-star"></li><label></label>
	</body>
	<script src="dist/jquery.js"></script>
	<script>
		$(function() {
			$("i").hover(function() {
				var n=$(this).index();//前面有1个元素
				console.log(n);
				$("i").css("color", "black");
				$(this).next().prevAll("i").css("color", "yellow");//定位当前的元素, 获取当前元素之前的所有 元素
				if(n<=2){
					$("label:first").text("差评")
				}else if(n<=4){
					$("label:first").text("一般")
				}else if(n==5){
					$("label:first").text("好评")
				}
			})
			$("li").click(function(){//方法二：点击事件
				var n=$(this).index()-7;//前面有7个元素
				console.log(n);
				$("li").css("color", "black");
				$(this).next().prevAll("li").css("color", "yellow");
//				$(this).unbind('mouseleave');//解绑鼠标离开事件
				if(n<=2){
					$("label:last").text("差评")
				}else if(n<=4){
					$("label:last").text("一般")
				}else if(n==5){
					$("label:last").text("好评")
				}
			})
		})
	</script>

</html>

效果

在这里插入图片描述

Alicesa

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQ实现星星评分

代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="fontawesome-free-5.11.2-web/css/all.css"/> </head> <body> <h1>浮动效果</h1> &
复制链接

扫一扫

专栏目录