diff --git a/areaList.html b/areaList.html index e930326..a7e42c0 100644 --- a/areaList.html +++ b/areaList.html @@ -47,401 +47,6 @@ 请选择世界遗产 - - - - \ No newline at end of file + + + \ No newline at end of file diff --git a/js/areaList.js b/js/areaList.js new file mode 100644 index 0000000..f88b678 --- /dev/null +++ b/js/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 += '
  • ' + item.name + '(0)
    • ' + } else { + areaList += '
  • ' + item.name + '(0)
    • ' + } + ulList += '' + $('.imgList').html(ulList); + }) + var bList = data[0].bowuguan; + var rightCont = ''; + $.each(bList, function(i, item) { + if(idList.indexOf(item.id) == -1) { + rightCont += '

  • ' + item.name + '

    • ' + + } else { + rightCont += '

  • ' + item.name + '

    • ' + + } + }) + $('.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 += '

  • ' + item.name + '

    • ' + + } else { + rightCont += '

  • ' + item.name + '

    • ' + } + }) + + $('.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 += '
  • ' + chooseArr[i].list[s] + '
    • ' + } + + 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 += '
  • ' + chooseArr[i].bName[j] + '
    • ' + + } + + } + $('.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 += '
  • ' + vals.bName[j] + '
    • ' + + } + }); + + $('.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" + } + + }) \ No newline at end of file