老师帮忙看一下有没有优化的点

来源：8-11 自由编程

qq_初晴moment_5

2019-11-09 15:55:29

<!DOCTYPE html>
<html>
<head>
	<title>练习</title>
	<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<style type="text/css">
		*{
			padding:0;
			margin:0;
		}
		#container {
			width:100%; 
			height: 100%; 
			position: absolute;
			top: 0;
			left: 0;
		} 
		#wrap{
			width: 300px;
			height: 200px;
			position: absolute;
			top: 10px;
			left: 10px;
			background-color: rgba(30,144,255,1);
		}
		.icon{
			width: 100%;
			height: 40px;
			/*background-color: yellow;*/
			text-align: center;
		}
		.fa{
			display: inline-block;
			width: 40px;
			height: 40px;
			line-height: 40px;
			cursor: pointer;
			color: rgba(255,255,255,0.7);
			/*background-color: red;*/
		}
		.start,.end{
			width: 200px;
			height: 30px;
			line-height: 30px;
			color: rgba(255,255,255,0.8);
			font-size: 14px;
			background-color: rgba(0,0,255,0.3);
			margin-left: 50px;
			padding-left: 5px;
		}
		.end{
			margin-top: 8px;
		}
		#startInput,#endInput{
			display: inline-block;
			font-size: 14px;
			color: rgba(255,255,255,0.8);
			background-color: transparent;
			border: none;
			outline: none;
		}
		#btn{
			width: 80px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			font-size: 14px;
			color: rgba(255,255,255,0.8);
			background-color: rgba(255,255,255,0.1);
			margin-left: 173px;
			margin-top: 30px;
			cursor: pointer;
		}
		#panel{
			width: 300px;
			position: absolute;
			top: 210px;
			left: 10px;
			background-color: #fff;
		}
	</style>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=fc606e66068012687b43d619876ea26c&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Driving,AMap.Transfer,AMap.Riding"></script>
</head>
<body>
	<div id="container"></div>
	<div id="wrap">
		<div class="icon" id="icon"><i class="fa fa-car" id="fa_car"></i><i class="fa fa-bus" id="fa_bus"></i><i class="fa fa-bicycle" id="fa_bicycle"></i></div>
		<div class="start">起
			<input type="text" id="startInput" placeholder="请输入起点">
		</div>
		<div class="end">终
			<input type="text" id="endInput" placeholder="请输入终点">
		</div>
		<div id="btn">开车去</div>
	</div>
	<div id="panel"></div>
	<script type="text/javascript">
		var map=new AMap.Map("container",{
			zoom:10,
			center:[121.472644,31.231706]
		});

		var fa_car=document.getElementById("fa_car"),
			fa_bus=document.getElementById("fa_bus"),
			fa_bicycle=document.getElementById("fa_bicycle"),
			startInput=document.getElementById("startInput"),
			endInput=document.getElementById("endInput"),
			btn=document.getElementById("btn"),
			icon=document.getElementById("icon"),
			panel=document.getElementById("panel");
		//输入提示
		new AMap.Autocomplete({
			input:'startInput'
		});
		startInput.oninput=function(){
			panel.style.display="none";
		}
		new AMap.Autocomplete({
			input:'endInput'
		});
		endInput.oninput=function(){
			panel.style.display="none";
		}
		function clear(){
			var icons=icon.childNodes;
			for(var i=0;i<icons.length;i++){
				icons[i].style.color="rgba(255,255,255,0.7)";
			}
		}
		//点击图标替换按钮文字
		fa_car.onclick=function(){
			btn.innerHTML="开车去";
			clear();
			this.style.color="rgba(255,255,255,1)";
		}
		fa_bus.onclick=function(){
			btn.innerHTML="坐公交";
			clear();
			this.style.color="rgba(255,255,255,1)";
		}
		fa_bicycle.onclick=function(){
			btn.innerHTML="骑车去";
			clear();
			this.style.color="rgba(255,255,255,1)";
		}
		//点击按钮出现路线
		btn.onclick=function(){
			if(btn.innerHTML == '开车去'){
				map.clearMap();
				panel.innerHTML="";
				panel.style.display="block";
				new AMap.Driving({
					map:map,
					panel:'panel'
				}).search([
					{keyword:startInput.value},
					{keyword:endInput.value}
					],function(status,data){});
			}else if(btn.innerHTML == '坐公交'){
				map.clearMap();
				panel.innerHTML="";
				panel.style.display="block";
				new AMap.Transfer({
					map:map,
					panel:'panel'
				}).search([
					{keyword:startInput.value,city:'上海'},
					{keyword:endInput.value,city:'上海'}
					],function(status,data){});
			}else if(btn.innerHTML == '骑车去'){
				map.clearMap();
				panel.innerHTML="";
				panel.style.display="block";
				new AMap.Riding({
					map:map,
					panel:'panel'
				}).search([
					{keyword:startInput.value},
					{keyword:endInput.value}
					],function(status,data){});
			}
		};
	</script>
</body>
</html>

老师，点击图标颜色变化有没有更好的方法，用childNodes会获取到空白元素，必须得去掉空格才可以，感觉太麻烦

写回答

1回答