liuguowei
3 years ago
2 changed files with 396 additions and 398 deletions
Unified View
Diff Options
-
401areaList.html
-
393js/areaList.js
@ -0,0 +1,393 @@ |
|||||
|
$('.wrap').css('height', $(window).height()); |
||||
|
$(function() { |
||||
|
list(); |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
getJssdk(); |
||||
|
wx.ready(function() { |
||||
|
getReadyWorld(); //执行接口
|
||||
|
}) |
||||
|
|
||||
|
var cseArr = []; |
||||
|
var chooseArr = []; |
||||
|
|
||||
|
function list() { |
||||
|
var datalist = []; |
||||
|
var areaList = ''; |
||||
|
var selectArr = []; |
||||
|
let idList = []; |
||||
|
|
||||
|
$.getJSON("json/jibenxinxi.json", function(data) { |
||||
|
var ulList = ''; |
||||
|
//左侧
|
||||
|
datalist = data; |
||||
|
$.each(data, function(i, item) { |
||||
|
if(i == 0) { |
||||
|
areaList += '<li class="active" leftid=' + item.id + ' data-name=' + item.pinyin + ' data-cityname=' + item.name + '><span class="name">' + item.name + '</span><span class="num">(0)</span></li>' |
||||
|
} else { |
||||
|
areaList += '<li class="" leftId=' + item.id + ' data-name=' + item.pinyin + '><span class="name">' + item.name + '</span><span class="num">(0)</span></li>' |
||||
|
} |
||||
|
ulList += '<ul class="museumImg">' |
||||
|
$.each(item.bowuguan, function(index, val) { |
||||
|
ulList += '<li class="" rightid=' + val.id + '></li>' |
||||
|
}) |
||||
|
ulList += '</ul>' |
||||
|
$('.imgList').html(ulList); |
||||
|
}) |
||||
|
var bList = data[0].bowuguan; |
||||
|
var rightCont = ''; |
||||
|
$.each(bList, function(i, item) { |
||||
|
if(idList.indexOf(item.id) == -1) { |
||||
|
rightCont += '<li class="" rightid=' + item.id + '><div class="item "><p class="contImg"><img src="' + item.photo + '" /></p><p class="icon"><img src="img/select.png" /></p></div><p class="name">' + item.name + '</p></li>' |
||||
|
|
||||
|
} else { |
||||
|
rightCont += '<li class="active" rightid=' + item.id + '><div class="item "><p class="contImg"><img src="' + item.photo + '" /></p><p class="icon"><img src="img/select.png" /></p></div><p class="name">' + item.name + '</p></li>' |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
$('.museumImg').eq(0).html(rightCont); |
||||
|
$('.museumImg').eq(0).css('display', 'flex'); |
||||
|
$('.leftList ul').html(areaList); |
||||
|
|
||||
|
//左侧点击事件
|
||||
|
$('.leftList ul').on('click', 'li', function(e) { |
||||
|
var rightCont = ''; |
||||
|
console.log(e) |
||||
|
console.log(data[$(this).index()].bowuguan) |
||||
|
var bList = data[$(this).index()].bowuguan; |
||||
|
$.each(bList, function(i, item) { |
||||
|
if(idList.indexOf(item.id) == -1) { |
||||
|
rightCont += '<li class="" rightid=' + item.id + '><div class="item "><p class="contImg"><img src="' + item.photo + '" /></p><p class="icon"><img src="img/select.png" /></p></div><p class="name">' + item.name + '</p></li>' |
||||
|
|
||||
|
} else { |
||||
|
rightCont += '<li class="active" rightid=' + item.id + '><div class="item "><p class="contImg"><img src="' + item.photo + '" /></p><p class="icon"><img src="img/select.png" /></p></div><p class="name">' + item.name + '</p></li>' |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
$('.museumImg').eq($(this).index()).html(rightCont); |
||||
|
|
||||
|
$(this).addClass('active').siblings().removeClass('active') |
||||
|
$('.imgList ul').eq($(this).index()).css('display', 'flex').siblings().css('display', 'none') |
||||
|
}) |
||||
|
//右侧点击事件
|
||||
|
$('.imgList').on('click', 'li', function(e) { |
||||
|
if($(this).hasClass('active')) { |
||||
|
$(this).removeClass('active'); |
||||
|
let index = idList.indexOf($(this).attr('rightid')) |
||||
|
delet(idList[index], index) |
||||
|
// idList.splice(index, 1);
|
||||
|
} else { |
||||
|
let q = $(this).parent().index(); |
||||
|
$(this).addClass('active'); |
||||
|
idList.push($(this).attr('rightid')) |
||||
|
hot(idList) |
||||
|
} |
||||
|
let ons = $(this).parent().find('.active').length; |
||||
|
if(ons > 0) { |
||||
|
$('.leftList li').eq($(this).parent().index()).find('.num').show(); |
||||
|
$('.leftList li').eq($(this).parent().index()).find('.num').html('(' + ons + ')'); |
||||
|
} else { |
||||
|
$('.leftList li').eq($(this).parent().index()).find('.num').hide(); |
||||
|
$('.leftList li').eq($(this).parent().index()).removeClass('select'); |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
function hot(id) { |
||||
|
chooseArr = []; |
||||
|
var m = null; |
||||
|
var num = null; |
||||
|
var choseCont = ''; |
||||
|
$.each(id, function(a, s) { |
||||
|
$.each($('.imgList li'), function(i, v) { |
||||
|
if(s == $(v).attr('rightid')) { |
||||
|
$(v).addClass('active'); |
||||
|
m = $('.imgList>ul').index($(v).parent()); |
||||
|
|
||||
|
$('.leftList li').eq(m).addClass('select'); |
||||
|
num = $(v).parent().find('.active').length; |
||||
|
$('.leftList li').eq(m).find('.num').show(); |
||||
|
$('.leftList li').eq(m).find('.num').html('(' + $(v).parent().find('.active').length + ')'); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
$.each(id, function(index, val) { |
||||
|
var split = val.split("_"); |
||||
|
$.each(datalist, function(index_1, val_1) { |
||||
|
// console.log(index_1)
|
||||
|
if(split[0] == val_1.id) { |
||||
|
console.log(val_1) |
||||
|
if(chooseArr.length > 0) { |
||||
|
var ifOf = true; |
||||
|
for(var i = 0; i < chooseArr.length; i++) { |
||||
|
|
||||
|
for(var s = 0; s <= chooseArr[i].list; s++) { |
||||
|
choseCont += '<li><span class="text">' + chooseArr[i].list[s] + '</span><span rightid=' + val.id + ' class="closeIcon"><img src="img/close.png"/></span></li>' |
||||
|
} |
||||
|
|
||||
|
if(chooseArr[i].id == split[0]) { |
||||
|
ifOf = false; |
||||
|
chooseArr[i].list.push(val); |
||||
|
|
||||
|
$.each(val_1.bowuguan, function(b, name) { |
||||
|
if(val == name.id) { |
||||
|
chooseArr[i].bName.push(name.name); |
||||
|
} |
||||
|
}) |
||||
|
$.each(val_1.bowuguan, function(b, name) { |
||||
|
if(val == name.id) { |
||||
|
chooseArr[i].bUrl.push(name.url); |
||||
|
} |
||||
|
}) |
||||
|
chooseArr[i].num++; |
||||
|
break; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
if(ifOf) { |
||||
|
var info = { |
||||
|
'id': '', |
||||
|
'name': '', |
||||
|
'cityName': '', |
||||
|
'num': '', |
||||
|
'bName': [], |
||||
|
'bUrl': [], |
||||
|
'list': [], |
||||
|
'bNum': idList.length, |
||||
|
} |
||||
|
info.id = val_1.id; |
||||
|
info.name = val_1.pinyin; |
||||
|
info.cityName = val_1.name |
||||
|
info.num = 1; |
||||
|
info.list = []; |
||||
|
info.list.push(val); |
||||
|
$.each(val_1.bowuguan, function(b, name) { |
||||
|
if(val == name.id) { |
||||
|
info.bName.push(name.name); |
||||
|
} |
||||
|
}) |
||||
|
$.each(val_1.bowuguan, function(b, name) { |
||||
|
if(val == name.id) { |
||||
|
info.bUrl.push(name.url); |
||||
|
} |
||||
|
}) |
||||
|
chooseArr.push(info); |
||||
|
xuanzhong() |
||||
|
} |
||||
|
|
||||
|
} else { |
||||
|
var info = { |
||||
|
'id': '', |
||||
|
'name': '', |
||||
|
'cityName': '', |
||||
|
'num': '', |
||||
|
'bName': [], |
||||
|
'bUrl': [], |
||||
|
'list': [], |
||||
|
'bNum': idList.length, |
||||
|
} |
||||
|
info.id = val_1.id; |
||||
|
info.name = val_1.pinyin; |
||||
|
info.cityName = val_1.name |
||||
|
|
||||
|
info.num = 1; |
||||
|
info.list = []; |
||||
|
info.list.push(val); |
||||
|
$.each(val_1.bowuguan, function(b, name) { |
||||
|
if(val == name.id) { |
||||
|
info.bName.push(name.name); |
||||
|
} |
||||
|
}) |
||||
|
$.each(val_1.bowuguan, function(b, name) { |
||||
|
if(val == name.id) { |
||||
|
info.bUrl.push(name.url); |
||||
|
} |
||||
|
}) |
||||
|
chooseArr.push(info); |
||||
|
xuanzhong(); |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
}); |
||||
|
console.log(chooseArr) |
||||
|
xuanzhong() |
||||
|
} |
||||
|
|
||||
|
function delet(deletId, index) { |
||||
|
idList.splice(index, 1); |
||||
|
|
||||
|
var idList2 = idList.length; |
||||
|
Array.prototype.remove = function(val) { |
||||
|
var index = this.indexOf(val); |
||||
|
if(index > -1) { |
||||
|
this.splice(index, 1); |
||||
|
} |
||||
|
}; |
||||
|
$.each($('.imgList li'), function(i, v) { |
||||
|
if($(v).attr('rightid') == deletId) { |
||||
|
$(v).removeClass('active'); |
||||
|
let a = $('.imgList>ul').index($(v).parent()); |
||||
|
if($(v).parent().find('.active').length <= 0) { |
||||
|
$('.leftList li').eq(a).find('.num').hide(); |
||||
|
$('.leftList li').eq(a).removeClass('select') |
||||
|
|
||||
|
} else { |
||||
|
$('.leftList li').eq(a).find('.num').html('(' + $(v).parent().find('.active').length + ')'); |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
var split = deletId.split("_"); |
||||
|
$.each(datalist, function(index_1, val_1) { |
||||
|
if(split[0] == val_1.id) { |
||||
|
if(chooseArr.length > 0) { |
||||
|
var ifOf = true; |
||||
|
for(var i = 0; i < chooseArr.length; i++) { |
||||
|
if(chooseArr[i].id == split[0]) { |
||||
|
ifOf = false; |
||||
|
chooseArr[i].list.remove(deletId); |
||||
|
|
||||
|
$.each(val_1.bowuguan, function(b, name) { |
||||
|
if(deletId == name.id) { |
||||
|
chooseArr[i].bName.remove(name.name); |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
if(chooseArr[i].list.length == 0) { |
||||
|
chooseArr.remove(chooseArr[i]) |
||||
|
} else { |
||||
|
chooseArr[i].num--; |
||||
|
|
||||
|
} |
||||
|
break; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
for(var i = 0; i < chooseArr.length; i++) { |
||||
|
chooseArr[i].bNum = idList2; |
||||
|
for(var j = 0; j <= chooseArr[i].bName; j++) { |
||||
|
cseArr += '<li><span class="text">' + chooseArr[i].bName[j] + '</span><span class="closeIcon"><img src="img/close.png"/></span></li>' |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
$('.chooseName').html(cseArr) |
||||
|
// chooseName
|
||||
|
if(ifOf) { |
||||
|
var info = { |
||||
|
'id': '', |
||||
|
'name': '', |
||||
|
'cityName': '', |
||||
|
'num': '', |
||||
|
'bName': [], |
||||
|
'bUrl': [], |
||||
|
'list': [], |
||||
|
'bNum': '', |
||||
|
} |
||||
|
info.id = val_1.id; |
||||
|
info.name = val_1.pinyin; |
||||
|
info.cityName = val_1.name |
||||
|
|
||||
|
info.num = 1; |
||||
|
info.bNum = 1; |
||||
|
info.list = []; |
||||
|
info.list.remove(deletId); |
||||
|
$.each(val_1.bowuguan, function(b, name) { |
||||
|
if(deletId == name.id) { |
||||
|
info.bName.remove(name.name); |
||||
|
} |
||||
|
}) |
||||
|
$.each(val_1.bowuguan, function(b, name) { |
||||
|
if(deletId == name.id) { |
||||
|
info.bUrl.remove(name.url); |
||||
|
} |
||||
|
}) |
||||
|
chooseArr.push(info); |
||||
|
} |
||||
|
|
||||
|
} else { |
||||
|
var info = { |
||||
|
'id': '', |
||||
|
'name': '', |
||||
|
'cityName': '', |
||||
|
'num': '', |
||||
|
'bName': [], |
||||
|
'bUrl': [], |
||||
|
'list': [], |
||||
|
'bNum': '', |
||||
|
} |
||||
|
info.id = val_1.id; |
||||
|
info.name = val_1.pinyin; |
||||
|
info.cityName = val_1.name |
||||
|
|
||||
|
info.num = 1; |
||||
|
info.list = []; |
||||
|
info.list.remove(deletId); |
||||
|
$.each(val_1.bowuguan, function(b, name) { |
||||
|
if(deletId == name.id) { |
||||
|
info.bName.remove(name.name); |
||||
|
} |
||||
|
}) |
||||
|
$.each(val_1.bowuguan, function(b, name) { |
||||
|
if(deletId == name.id) { |
||||
|
info.bUrl.remove(name.url); |
||||
|
} |
||||
|
}) |
||||
|
info.bNum = 1; |
||||
|
|
||||
|
chooseArr.push(info); |
||||
|
|
||||
|
console.log(info) |
||||
|
console.log(chooseArr) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
console.log(chooseArr) |
||||
|
xuanzhong() |
||||
|
} |
||||
|
|
||||
|
function xuanzhong() { |
||||
|
$('.tips').fadeOut(0); |
||||
|
cseArr = ''; |
||||
|
$.each(chooseArr, function(ind, vals) { |
||||
|
var dist = vals.bName.length; |
||||
|
for(var j = 0; j < dist; j++) { |
||||
|
console.log(j) |
||||
|
cseArr += '<li><span class="text">' + vals.bName[j] + '</span><span rightid=' + vals.list[j] + ' class="closeIcon"><img src="img/close.png"/></span></li>' |
||||
|
|
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
$('.chooseName').html(cseArr) |
||||
|
} |
||||
|
$('.chooseName').on('click', '.closeIcon', function() { |
||||
|
console.log('111') |
||||
|
$(this).removeClass('active'); |
||||
|
let index = idList.indexOf($(this).attr('rightid')) |
||||
|
delet(idList[index], index) |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
var clickState = true; |
||||
|
$('.deepBtn').click(function() { |
||||
|
// console.log(chooseArr)
|
||||
|
if(chooseArr.length == 0) { |
||||
|
$('.tips').fadeIn(500); |
||||
|
setTimeout(function() { |
||||
|
$('.tips').fadeOut(1000); |
||||
|
|
||||
|
}, 1000) |
||||
|
} else { |
||||
|
localStorage.setItem("chooseArr", JSON.stringify(chooseArr)); |
||||
|
console.log(chooseArr) |
||||
|
location.replace("http://h5.qishichuangke.cn/html5/zxxt/index/index-world"); |
||||
|
// window.location.href = "worldShare.html"
|
||||
|
} |
||||
|
|
||||
|
}) |
||||