使用jquery中$.each()方法循环显示购物车中店铺名称及店铺下所对应的商品列表

效果图如下: 

 

代码如下:(重点:两层循环

//获取购物车中的商品信息
		$.ajax({
			type: "post", //请求方式
			dataType: 'json', //数据格式
			url: //请求地址
			data: {
				"ss": getCookie('openid') //请求参数  openid
			},
			success: function(data) {
				console.log(data)
				if(data.code == 1) { //请求成功
					var con = data.result.info;

					//					console.log(con);
					var html = '';
					$.each(con, function(c, t) {
						var supper_name=t.supplier_name==null ? "无" : t.supplier_name
						html += "<div class='shopCartCon' suppid=" + con[c].supplier_id + ">" +
							"<div class='storeBox'>" +
							"<div class='checkLeft'>" +
							"<label class='seconLabel'>" +
							"<input type='checkbox' class='input seconParent' sup_id=" + con[c].supplier_id + " />" +
							"</label>" +
							"</div>" +
							"<div class='storeName'>" + supper_name + "</div>" +
							"<div class='storeBack'></div>" +
							"</div>" +
							"<div class='storeCon conStore'>";
						var goodList = t.goods_list;
						$.each(goodList, function(k, v) {
							var car_id = goodList[k].car_id; //购物车id
							var first_class_id = goodList[k].first_class_id;
							var created_at = goodList[k].created_at;
							var goods_id = goodList[k].goods_id; //商品id
							var goods_name = goodList[k].goods_name == "" ? "无" : goodList[k].goods_name; //商品名称
							var goods_price = goodList[k].goods_price == "0.00" ? "免费领取" : goodList[k].goods_price; //商品单价
							var goods_url = goodList[k].goods_url == "" ? "无" : goodList[k].goods_url; //商品图片
							var number = goodList[k].number == "" ? "无" : goodList[k].number; //商品数量
							var state = stateCheck(goodList[k].state, car_id, goods_name, goods_url, goods_id, number, goods_price); //商品状态
							var state1 = goodList[k].state == "0"; //商品状态
							html += "<div class='storeConHei'>" +
								"<div class='nextCheck'>" + state + "</div>" +
								"<div class='nextShopImg' goods_id="+goods_id+" onclick='goDetail(" + goods_id + ")'>" +
								"<img src=" + goods_url + " alt='' />" +
								"</div>" +
								"<div class='rightDiv'>" +
								"<div class='shopTitle'>" + goods_name + "</div>" +
								"<div class='shopPro'>" +
								"<span class='shopPro1'><span></span><span class='daipen'></span></span>" +
								"<span class='dlecon'><img src='images/deleCon.png' alt='' class='dleconImg' cImg=" + car_id + " /></span>" +
								"</div>" +
								"<div class='shopPriceBox'>" +
								"<div class='shopPrice'>" + goods_price + "</div>" +
								"<div class='addBox'>" +
								"<div class='Jian minClass' muites=" + goods_id + ">-</div>" +
								"<div class='inpuCon'><input type='text' name='' id='' value=" + number + " class='inTeCon' readonly='readonly' /></div>" +
								"<div class='Jian addClass' add=" + goods_id + ">+</div>" +
								"</div>" +
								"</div>" +
								"</div>" +
								"</div>";
						});

						html += "</div>" +
							"<div class='fengexian1'></div>" +
							"<div class='fengexian'></div>" +
							"</div>";
					})
					$(".shopBox1").append(html); //动态显示商品
					allsetTotal();
				}
			}
		});

猜你喜欢

转载自blog.csdn.net/qq_37481512/article/details/86233107
今日推荐