虽然这个是比较菜鸟的功能,但还是想写下来,,以此纪念当时我迷茫可怜的眼神。。。。。。如果有跟我同样可怜的菜鸟前端,,共勉。
1、第一次进入页面的时候点击请求接口,当选择其它城市的时候请求接口,选择相同城市的时候不请求接口。
代码如下,此为完整例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title></title>
<style>
.win{
width: 100%;
height: 100%;
z-index: 100;
background: #fff;
display: none;
top: 0;
position: fixed;
}
.lan{
width: 100%;
height: 50px;
border:1px solid red;
}
.fullAdress{
width: 100%;
height: 50px;
border:1px solid red;
text-align: center;
}
.back{
width: 100%;
height: 30px;
}
.selectZp{
width: 100%;
height: 50px;
margin-top: 40px;
border:1px solid #dddddd;
line-height: 50px;
text-align: center;
}
.prefullAdress{
display: none;
}
</style>
</head>
<body>
<div class="prefullAdress" cityid=''></div>
<div class="fullAdress" cityid='1'>成都</div>
<div class="selectZp">请求接口</div>
<div class="win">
<div class="back">*******</div>
<div class="lan" selectyid='1'>成都</div>
<div class="lan" selectyid='2'>福建</div>
<div class="lan" selectyid='3'>上海</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var percity='';
var flag=true;
$('.fullAdress').click(function(){
$('.win').show();
})
$('.back').click(function(){
$('.win').hide();
})
$('.lan').click(function(){
var selectid=$(this).attr('selectyid');
var html=$(this).html();
$('.fullAdress').attr('cityid',selectid).html(html)
$('.win').hide();
})
$('.selectZp').click(function(){
//第一次点击
if(flag){
var city=$('.fullAdress').attr('cityid');
$('.prefullAdress').attr('percity',city);
console.log('成功');
flag=false;
return false;
}
//第二次点击
if(!flag){
var percity=$('.prefullAdress').attr('percity');
var city=$('.fullAdress').attr('cityid');
if(city!==percity){
console.log('成功');
}
$('.prefullAdress').attr('percity',city);
}
})
</script>
</html>