滑动星星评分

最新推荐文章于 2021-08-04 08:58:09 发布

善良瓜

最新推荐文章于 2021-08-04 08:58:09 发布

阅读量370

点赞数

分类专栏： jquery 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47164448/article/details/113833441

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>五角星评分案例</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			.comment {
				font-size: 40px;
				color: rgb(255, 94, 0);
			}
			.comment li {
				float: left;
			}
			ul {
				list-style: none;
			}
		</style>
		<script src="js\jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				//获取所有的li绑定鼠标进入和鼠标离开和点击事件
				$(".comment>li").mouseover(function() {
					$(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
				}).mouseout(function() {
					$(this).text("☆").prevAll("li").text("☆");
					//获取属性index为10的这个li和这个li前面所有的li
					$(".comment>li[index=10]").text("★").prevAll("li").text("★");
				}).click(function() {
					$(this).attr("index", "10").siblings("li").removeAttr("index");
				});
			});
		</script>
	</head>
	<body>
		<ul class="comment">
			<li>☆</li>
			<li>☆</li>
			<li>☆</li>
			<li>☆</li>
			<li>☆</li>
		</ul>
	</body>
</html>

善良瓜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
滑动星星评分

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>五角星评分案例</title> <style> * { padding: 0; margin: 0; } .comment { font-size: 40px; color: rgb(255, 94, 0); }
复制链接

扫一扫