liuguowei
3 years ago
2 changed files with 396 additions and 398 deletions
Split 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"
|
|||
} |
|||
|
|||
}) |
|||