为什么点击多几次查询就会出问题？
来源：8-11 自由编程
soso_crazy
2019-05-14 15:23:21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>8-11练习</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.Transfer,AMap.Autocomplete,AMap.Driving,AMap.Riding"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#container {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#panel {
position: fixed;
background: white;
top: 300px;
left: 50px;
width: 400px;
}
.search-container {
position: fixed;
top: 50px;
left: 50px;
background-color: #1E90FF;
width: 400px;
height: 250px;
}
ul {
/* 使用弹性布局使得图标两端对齐 */
display: flex;
justify-content: space-between;
width: 200px;
margin: 20px auto 0;
}
ul li {
float: left;
}
.active {
color: #ffffff;
text-align: center;
margin-bottom: 10px;
}
input[type="text"] {
display: block;
width: 200px;
height: 30px;
margin: 20px auto;
border: none;
background-color: #87CEEB;
outline: none;
color: #ffffff;
}
p.button {
position: absolute;
bottom: 50px;
right: 50px;
}
button {
display: none;
width: 60px;
height: 30px;
background-color: #87CEEB;
border: none;
border-radius: 5px;
color: #ffffff;
text-align: center;
}
.btn-active {
display: block;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="search-container">
<ul>
<li class="active"><i class="fa fa-car"></i></li>
<li><i class="fa fa-bus"></i></li>
<li><i class="fa fa-bicycle"></i></li>
</ul>
<div class="keyword">
<input id="startNode" type="text" placeholder="起 请输入起点" />
<input id="endNode" type="text" placeholder="终 请输入终点" />
</div>
<p class="button">
<button class="btn car-btn btn-active">开车去</button>
<button class="btn bus-btn">坐公交去</button>
<button class="btn bicycle-btn">骑车去</button>
</p>
</div>
<div id="panel"></div>
<script type="text/javascript">
var icons = document.getElementsByTagName('li');
var buttons = document.getElementsByTagName('button');
for (var i = 0; i < icons.length; i++) { //遍历获得的li数组
icons[i].index = i; //将对应的索引和li联系起来
icons[i].onclick = function() {
for (var i = 0; i < icons.length; i++) {
icons[i].setAttribute('class', '');
buttons[i].style.display = 'none';
}
this.setAttribute('class', 'active');
buttons[this.index].style.display = 'block';
};
}
var map = new AMap.Map('container', {
zoom: 11
});
new AMap.Autocomplete({
input: 'startNode'
});
new AMap.Autocomplete({
input: 'endNode'
});
for (var j = 0; j < buttons.length; j++) {
buttons[j].index = j;
buttons[j].onclick = function() {
map.clearMap();
if (buttons[this.index].innerHTML == '开车去') {
car();
} else if (buttons[this.index].innerHTML == '坐公交去') {
bus();
} else if (buttons[this.index].innerHTML == '骑车去') {
bicycle();
}
}
}
function car() {
new AMap.Driving({
map: map,
panel: 'panel'
}).search([{
keyword: startNode.value
}, {
keyword: endNode.value
}], function(status, data) {
console.log(data);
})
}
function bus() {
new AMap.Transfer({
map: map,
panel: 'panel',
city: '佛山'
}).search([{
keyword: startNode.value
}, {
keyword: endNode.value
}], function(status, data) {
console.log(data);
});
}
function bicycle() {
new AMap.Riding({
map: map,
panel: 'panel'
}).search([{
keyword: startNode.value
}, {
keyword: endNode.value
}], function(status, data) {
console.log(data);
});
}
</script>
</body>
</html>
2回答
-
好帮手慕糖
2019-05-14
同学你好，这里这个歌元素是隐藏的，是选择公交的时候，展示路线部分的代码，如下：
可以尝试下，不使用公交，使用“开车”或者“骑车”是没有这个错误的哦。
希望能帮助到你，欢迎采纳。
祝学习愉快！
0 -
好帮手慕糖
2019-05-14
同学你好，如下，这里报错是因为在点击的过程中，有添加了一个li，导致icons的获取多了一个，且长度增加了，但是buttons的长度并没有改变，所以buttons没有对应的这个元素，所以报错了。
建议：这里可以给ul添加一个类，然后通过这个ul去获取li哦，这样的长度是不会改变的，例：
希望能帮助到你，欢迎采纳。
祝学习愉快！
0h019-05-14
相似问题