<!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.15" 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"></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");
window.location.href = "worldShare.html"
}
})
</script>