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

刺骨的言语ヽ痛彻心扉 2022-03-28 11:42 132阅读 0赞

效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy_size_16_color_FFFFFF_t_70][]

代码如下：（重点：两层循环）

//获取购物车中的商品信息
    		$.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();
    				}
    			}
    		});

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy_size_16_color_FFFFFF_t_70]: /images/20220328/959ed0e26cee4f89832f2c03c33f9282.png