shijieyichan/js/areaList.js

$('.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"
		}

	})