|
|
<!DOCTYPE html><html>
<head> <meta charset="utf-8" /> <title>朱熹学堂—世界遗产之旅（中国）</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"> <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/common.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="css/base.css" /> <link rel="stylesheet" type="text/css" href="css/areaList.css" /> <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script> <script src="http://h5.qishichuangke.cn/html5/resources/js/zxxt/wx-config.js?vs=1.1.16" type="text/javascript" charset="utf-8"></script> </head>
<body> <div class="wrap"> <div class="box_cont"> <div class="leftList"> <ul> </ul> </div> <div class="rightCont"> <div class="title"> <img src="img/icon1.png" />世界遗产 </div> <div class="imgList"> <ul class="museumImg"> </ul>
</div> <div class="chooseList"> <p><img src="img/unselected.png" />已选</p> <ul class="chooseName"> </ul> </div> </div> </div>
<div class="deepBtn">提交</div> </div> <div class="tips"> 请选择世界遗产 </div> </body>
</html><script src="json/jibenxinxi.json?vs=1.1.1"></script><script type="text/javascript"> $('.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" }
})</script>
|
