淘宝五颗星星评论

最新推荐文章于 2019-10-10 23:51:19 发布

黎成诃月

最新推荐文章于 2019-10-10 23:51:19 发布

阅读量211

点赞数

分类专栏：前端-javaScript

本文链接：https://blog.csdn.net/weixin_40292626/article/details/101108825

版权

前端-javaScript 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝五颗星星评论</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<style>
.main img{
	display: inline-block;
	width: 24px;
	height: 24px;
}
</style>
<body>
<div class='main'>
		<img src="check.png" onclick="tab(1)">
		<img src="check.png" onclick="tab(2)">
		<img src="check.png" onclick="tab(3)">
		<img src="check.png" onclick="tab(4)">
		<img src="check.png" onclick="tab(5)">
</div>
<div id="aaa"></div>
<script type="text/javascript">
var num = ''
function tab(e) {
	num = e;
	var sp = document.getElementById("aaa")
	console.log(sp)
	switch (e) {
		case 1:
		sp.innerHTML = '太差'
		break;
		case 2:
		sp.innerHTML='有点差';
		break;
		case 3:
		sp.innerHTML='一般';
		break;
		case 4:
		sp.innerHTML='良好'
		break;
		case 5:
		sp.innerHTML='完美'
		break;
	}
	for(var i=0;i<num;i++) {
		document.getElementsByTagName('img')[i].src = "check-on.png";
	}
	for(var i=4;i>=num;i--) {
		document.getElementsByTagName('img')[i].src = "check.png";
	}
}
</script>
<!-- 	<div class='main'>
		<img src="check.png" id=1>
		<img src="check.png" id=2>
		<img src="check.png" id=3>
		<img src="check.png" id=4>
		<img src="check.png" id=5>
	</div>
	<div id="aaa"></div>
	<script type="text/javascript">
	var num = ''
	$(function(){
		$('.main img').click(function(){
			console.log($(this))
			num = Number($(this).context.id);
			$(this).attr('src','check-on.png');
			$(this).prevAll().attr('src','check-on.png')
			$(this).nextAll().attr('src','check.png')
			var sp = $("#aaa")
			console.log(num)
			switch (num) {
				case 1:
				sp.text('太差');
				console.log('1111111111111')
				break;
				case 2:
				sp.text('有点差');
				break;
				case 3:
				sp.text('一般');
				break;
				case 4:
				sp.text('良好')
				break;
				case 5:
				sp.text('完美')
				break;
			}
		})
	})
	</script> -->
</body>
</html>

黎成诃月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
淘宝五颗星星评论

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>淘宝五颗星星评论</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"&g...
复制链接

扫一扫

专栏目录