淘宝五颗星星评论

<!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>

 

发布了118 篇原创文章 · 获赞 23 · 访问量 20万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览