前端jquery实现商城sku效果

痛定思痛。 2022-05-15 08:51 460阅读 0赞

商城项目的两大核心，商品sku和订单，其中sku的实现还是有点复杂，尤其是在处理元素的监听事件，通过规格属性的id组合获取单品商品信息。一般思路是现获取sku的规格和属性，动态创建dom元素，然后请求后台接口数据获取单品，此文已本地json数据模拟全sku的情况，如果非全码的情况下，罗机处理非常复杂，还需考虑商品单品不存时候，元素置灰，不可点击得人情况:

![70][]

![70 1][]

1、css文件：

body {
                width: 100%;
                height: 450px;
            }
    
            .outer-div {
                margin: 5px;
                width: 40%;
                height: 100%;
                border: blue solid 1px;
            }
    
            .left-div {
                float: left;
                width: 40%;
                height: 100%;
                /**border: black solid 1px;*/
            }
    
            .right-div {
                float: left;
                width: 60%;
                height: 100%;
                
            }
    
            .master-img {
                width: 100%;
                height: 100%;
            }
    
            .right-top-img {
                float: left;
                margin: 5px;
                width: 30%;
                height: 100px;
            }
    
            .right-top-div {
                float: left;
                margin-top: 15px;
                margin-right: 10px;
                height: 100px;
            }
    
            .right-top-span {
                margin-top: 8px;
            }
    
            .right-bottom-div {
                margin-left: 5px;
                margin-top: 120px;
                 width:100%;
            }
    
            .right-bottom-span-normal {
                padding: 5px;
                margin-right: 10px;
                 font: "微软雅黑";
                border-radius: 5px;
                border: 1px solid black;
            }
    
            .right-bottom-span-select {
                padding: 5px;
                margin-right: 10px;
                font: "微软雅黑";
                color: red;
                border-radius: 5px;
                border: 2px solid red;
            }

2、sku的json数据，和商品json数据

[
    	{
    		"parentId": 1,
    		"skuAttr": "尺寸",
    		"itemList": [
    			{
    				"id": 0,
    				"skuName": "39码"
    			}, {
    				"id": 1,
    				"skuName": "40码"
    			}, {
    				"id": 2,
    				"skuName": "41码"
    			}, {
    				"id": 3,
    				"skuName": "42码"
    			}
    		]
    	}, {
    		"parentId": 2,
    		"skuAttr": "颜色",
    		"itemList": [
    			{
    				"id": 0,
    				"skuName": "红色"
    			}, {
    				"id": 1,
    				"skuName": "白色"
    			}, {
    				"id": 2,
    				"skuName": "黄色"
    			}, {
    				"id": 3,
    				"skuName": "蓝色"
    			}
    		]
    	}
    ]

[
    	{
    		"itemId": "1020",
    		"img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3576006200,3251831212&fm=26&gp=0.jpg",
    		"name": "城市丽人",
    		"price": 100.0
    	}, {
    		"itemId": "1021",
    		"img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535965622122&di=81c5840ad16c828eed3ec1cf838a5d4f&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2F696c50aaa1ce68c950288ac3f00d65a4e91cad63.jpg",
    		"name": "夏季新品连衣裙",
    		"price": 101.5
    	}, {
    		"itemId": "1022",
    		"img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233746&di=6e119707497b4b2d5bea2fa53724ce08&imgtype=0&src=http%3A%2F%2Fimg.go007.com%2F2017%2F04%2F08%2F185db2e70c24a49b_2.jpg",
    		"name": "红豆女装",
    		"price": 103.0
    	}, {
    		"itemId": "1023",
    		"img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233745&di=353ed113ae709cd9d134bb59014d473b&imgtype=0&src=http%3A%2F%2Fimg000.hc360.cn%2Fy4%2FM00%2FF7%2F96%2FwKhQiFUpYruEQ2i6AAAAAHLEXbw797.jpg",
    		"name": "城市丽人",
    		"price": 104.5
    	}, {
    		"itemId": "1120",
    		"img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233741&di=19f9b9a22c4de4ed6c2a17c9a9534c9d&imgtype=0&src=http%3A%2F%2Fimg000.hc360.cn%2Fhb%2FMTQ2MjM1NjE1MTQxNy03ODQyOTIwODQ%3D.jpg",
    		"name": "夏季新品连衣裙",
    		"price": 106.0
    	}, {
    		"itemId": "1121",
    		"img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233743&di=bb19b1a16788e58c5d6b0ac4ac17bbe1&imgtype=0&src=http%3A%2F%2Fmlady.2liang.net%2Fd%2Ffile%2Fclothing%2Fxiazhuang%2F2016-04%2Fefebf66e3e70b09d0371b7c045580871.jpg",
    		"name": "红豆女装",
    		"price": 107.5
    	}, {
    		"itemId": "1122",
    		"img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233743&di=e1c715e4919b7e888fe985b0b9f080de&imgtype=0&src=http%3A%2F%2Fimg004.hc360.cn%2Fy4%2FM05%2F25%2FF1%2FwKhQiFT6GsqEHiplAAAAAAaQmss866.jpg",
    		"name": "城市丽人",
    		"price": 109.0
    	}, {
    		"itemId": "1123",
    		"img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233743&di=731cfe3cea4c6c5f893c743c5b94bc7d&imgtype=0&src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi1%2FTB1JAMnfkSWBuNjSszdXXbeSpXa_%2521%25210-item_pic.jpg_400x400.jpg",
    		"name": "夏季新品连衣裙",
    		"price": 110.5
    	}, {
    		"itemId": "1220",
    		"img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233740&di=f6c5afcc7dd462fa5bfee7e0963b46c9&imgtype=0&src=http%3A%2F%2Fd6.yihaodianimg.com%2FN02%2FM0B%2F6F%2FAA%2FCgQCslOlNgCAZFOxAAHlr_RIVAg76400.jpg",
    		"name": "红豆女装",
    		"price": 112.0
    	}, {
    		"itemId": "1221",
    		"img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446471851&di=f1a483e99c8e8be05f3a9702c4c097ec&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D74341273%2C3968231785%26fm%3D214%26gp%3D0.jpg",
    		"name": "城市丽人",
    		"price": 113.5
    	}, {
    		"itemId": "1222",
    		"img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233807&di=02c117c17b1a83ca8ca76ec9dfbfddf7&imgtype=0&src=http%3A%2F%2Fd6.yihaodianimg.com%2FN07%2FM00%2F95%2F6D%2FChEbvFWsImOAalfeAAGGZc9le2005000.jpg",
    		"name": "夏季新品连衣裙",
    		"price": 115.0
    	}, {
    		"itemId": "1223",
    		"img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233807&di=9a91b89aad071f1c03ea9bb07b886baa&imgtype=0&src=http%3A%2F%2Fm.360buyimg.com%2Fn12%2Fg14%2FM02%2F1B%2F0B%2FrBEhV1NGOGYIAAAAAAIn4ZRI2LwAALrGAGW-pIAAif5340.jpg%2521q70.jpg",
    		"name": "红豆女装",
    		"price": 116.5
    	}, {
    		"itemId": "1320",
    		"img": "https://img.alicdn.com/imgextra/i2/712330740/TB1jbAcCFGWBuNjy0FbXXb4sXXa_!!0-item_pic.jpg_430x430q90.jpg",
    		"name": "城市丽人",
    		"price": 118.0
    	}, {
    		"itemId": "1321",
    		"img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233807&di=2bf2316f331895bd828abe830f2d1723&imgtype=0&src=http%3A%2F%2Fimage4.suning.cn%2Fuimg%2Fb2c%2Fnewcatentries%2F0000000000-000000000688881146_2_800x800.jpg",
    		"name": "夏季新品连衣裙",
    		"price": 119.5
    	}, {
    		"itemId": "1322",
    		"img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233806&di=6bbad8c769ac88fd2c32fa764103f793&imgtype=0&src=http%3A%2F%2Fimg009.hc360.cn%2Fm6%2FM04%2F73%2F53%2FwKhQoVcVtiaEPtGfAAAAAK4k0NY745.jpg",
    		"name": "红豆女装",
    		"price": 121.0
    	}, {
    		"itemId": "1323",
    		"img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233805&di=43e3ad8b377a79a1fc95981a2491b6f5&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bb875929671aa801216a3e9881f0.jpg%401280w_1l_2o_100sh.jpg",
    		"name": "城市丽人",
    		"price": 122.5
    	}
    ]

3、html布局和js逻辑

<!DOCTYPE html>
    <html>
         <head>
    		<meta charset="UTF-8">
    		<link rel="stylesheet" type="text/css" href="css/sku.css" />
    		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    		<script type="text/javascript">
    			var jsonStr = '[{"parentId":1,"skuAttr":"尺寸","itemList":[{"id":0,"skuName":"39码"},{"id":1,"skuName":"40码"},{"id":2,"skuName":"41码"},{"id":3,"skuName":"42码"}]},{"parentId":2,"skuAttr":"颜色","itemList":[{"id":0,"skuName":"红色"},{"id":1,"skuName":"白色"},{"id":2,"skuName":"黄色"},{"id":3,"skuName":"蓝色"}]}]';
    			var skuJson = '[{"itemId":"1020","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536040952&di=3d0e69918da73060dcdb921173d5a791&imgtype=jpg&er=1&src=http%3A%2F%2Fimg4.99114.com%2Fgroup1%2FM00%2F19%2F78%2FwKgGMFgqsHSAP6BfAAIaSnHqL-E258.jpg","name":"城市丽人","price":100.0},{"itemId":"1021","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233746&di=ee6e713744b5dff59ddd2725f4ac8eb6&imgtype=0&src=http%3A%2F%2Ffile5.youboy.com%2Fe%2F2015%2F4%2F28%2F91%2F662831.jpg","name":"夏季新品连衣裙","price":101.5},{"itemId":"1022","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233746&di=6e119707497b4b2d5bea2fa53724ce08&imgtype=0&src=http%3A%2F%2Fimg.go007.com%2F2017%2F04%2F08%2F185db2e70c24a49b_2.jpg","name":"红豆女装","price":103.0},{"itemId":"1023","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233745&di=353ed113ae709cd9d134bb59014d473b&imgtype=0&src=http%3A%2F%2Fimg000.hc360.cn%2Fy4%2FM00%2FF7%2F96%2FwKhQiFUpYruEQ2i6AAAAAHLEXbw797.jpg","name":"城市丽人","price":104.5},{"itemId":"1120","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233741&di=19f9b9a22c4de4ed6c2a17c9a9534c9d&imgtype=0&src=http%3A%2F%2Fimg000.hc360.cn%2Fhb%2FMTQ2MjM1NjE1MTQxNy03ODQyOTIwODQ%3D.jpg","name":"夏季新品连衣裙","price":106.0},{"itemId":"1121","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233743&di=bb19b1a16788e58c5d6b0ac4ac17bbe1&imgtype=0&src=http%3A%2F%2Fmlady.2liang.net%2Fd%2Ffile%2Fclothing%2Fxiazhuang%2F2016-04%2Fefebf66e3e70b09d0371b7c045580871.jpg","name":"红豆女装","price":107.5},{"itemId":"1122","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233743&di=e1c715e4919b7e888fe985b0b9f080de&imgtype=0&src=http%3A%2F%2Fimg004.hc360.cn%2Fy4%2FM05%2F25%2FF1%2FwKhQiFT6GsqEHiplAAAAAAaQmss866.jpg","name":"城市丽人","price":109.0},{"itemId":"1123","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233743&di=731cfe3cea4c6c5f893c743c5b94bc7d&imgtype=0&src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi1%2FTB1JAMnfkSWBuNjSszdXXbeSpXa_%2521%25210-item_pic.jpg_400x400.jpg","name":"夏季新品连衣裙","price":110.5},{"itemId":"1220","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233740&di=f6c5afcc7dd462fa5bfee7e0963b46c9&imgtype=0&src=http%3A%2F%2Fd6.yihaodianimg.com%2FN02%2FM0B%2F6F%2FAA%2FCgQCslOlNgCAZFOxAAHlr_RIVAg76400.jpg","name":"红豆女装","price":112.0},{"itemId":"1221","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446471851&di=f1a483e99c8e8be05f3a9702c4c097ec&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D74341273%2C3968231785%26fm%3D214%26gp%3D0.jpg","name":"城市丽人","price":113.5},{"itemId":"1222","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233807&di=02c117c17b1a83ca8ca76ec9dfbfddf7&imgtype=0&src=http%3A%2F%2Fd6.yihaodianimg.com%2FN07%2FM00%2F95%2F6D%2FChEbvFWsImOAalfeAAGGZc9le2005000.jpg","name":"夏季新品连衣裙","price":115.0},{"itemId":"1223","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233807&di=9a91b89aad071f1c03ea9bb07b886baa&imgtype=0&src=http%3A%2F%2Fm.360buyimg.com%2Fn12%2Fg14%2FM02%2F1B%2F0B%2FrBEhV1NGOGYIAAAAAAIn4ZRI2LwAALrGAGW-pIAAif5340.jpg%2521q70.jpg","name":"红豆女装","price":116.5},{"itemId":"1320","img":"https://img.alicdn.com/imgextra/i2/712330740/TB1jbAcCFGWBuNjy0FbXXb4sXXa_!!0-item_pic.jpg_430x430q90.jpg","name":"城市丽人","price":118.0},{"itemId":"1321","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233807&di=2bf2316f331895bd828abe830f2d1723&imgtype=0&src=http%3A%2F%2Fimage4.suning.cn%2Fuimg%2Fb2c%2Fnewcatentries%2F0000000000-000000000688881146_2_800x800.jpg","name":"夏季新品连衣裙","price":119.5},{"itemId":"1322","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233806&di=6bbad8c769ac88fd2c32fa764103f793&imgtype=0&src=http%3A%2F%2Fimg009.hc360.cn%2Fm6%2FM04%2F73%2F53%2FwKhQoVcVtiaEPtGfAAAAAK4k0NY745.jpg","name":"红豆女装","price":121.0},{"itemId":"1323","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233805&di=43e3ad8b377a79a1fc95981a2491b6f5&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bb875929671aa801216a3e9881f0.jpg%401280w_1l_2o_100sh.jpg","name":"城市丽人","price":122.5}]';
    
    			var $masterImg; //主图
    			var $smallImg; //小图
    			var $skuName; //商品名称
    			var $skuSpec; //商品规格组合
    			var $skuPrice; //商品价格
    
    			var skuIds = new Array(); //所有规格的全id        
    			var skuList = new Array(); //所有规格属性json集合
    			var goodsList = new Array(); //所有单品json集合
    			var specIds; //规格组合id
    			var specNames; //屬性名称
    			var firstNameSpec="";
    			var firstGoodsObj;
    
    			$(function() {
    				init$Obj();
    				skuJson2Arr();
    				addSkuList($skuContainer);
    			});
    
    			/**
    			 * 初始化jquery元素
    			 */
    			function init$Obj() {
    				$masterImg = $("#master-img");
    				$smallImg = $("#small-img");
    				$skuName = $("#sku-name");
    				$skuSpec = $("#sku-spec");
    				$skuPrice = $("#sku-price");
    				$skuContainer =$("#sku-spec-contanier");
    			}
    
    			/**
    			 *动态添加sku的规格属性 
    			 */
    			function addSkuList($skuContainer) {
    				
    				$.getJSON("spec_list.json", function(data) {
    					specIds = new Array();
    					specNames = new Array();
    
    					$.each(data, function(index, info) {
    						console.log("規格=" + JSON.stringify(info));
    						skuList[index] = info;
    						var obj = info;
    						var $div = $("<div style='margin-top: 15px;'></div>");
    						var $span = $("<span>" + obj.skuAttr + "</span></br></br>");
    						$div.append($span);
    					
    						var objList = obj.itemList;
    						var $sdiv = $("<div></div>");
    
    						$.each(objList, function(index2, goods) {
    							var sobj = goods;
    							var $sspan = $("<span>" + sobj.skuName + "</span>");
    							var tempId = ((index + 1).toString() + index2.toString()) + "&" + index;
    							$sspan.attr("id", tempId);
    					
    							if(index2 == 0) {
    								$sspan.addClass("right-bottom-span-select");
    								firstNameSpec=firstNameSpec+sobj.skuName;
    								console.log("第一个商品的名称="+firstNameSpec);
    							}else 
    								$sspan.addClass("right-bottom-span-normal");
    							
    							$sdiv.append($sspan);
    							
    							$($sspan).click(function() {
    								$(this).removeClass("right-bottom-span-normal").addClass("right-bottom-span-select");
    								$(this).siblings().removeClass("right-bottom-span-select").addClass("right-bottom-span-normal");
    								var mId = $(this).attr("id");
    								var splits = mId.split("&");
    								var mName = $(this).html();
    								specIds[splits[1]] = splits[0];
    								specNames[splits[1]] = mName;
    								getSpecIds();
    							});
    							
    							$div.append($sdiv);
    							$skuContainer.append($div);
    						   });
    					});
    				});
    			}
    			/**
    			 * 把skuJson解析存储到数组
    			 */
    
    			function skuJson2Arr() {
    				$.getJSON("goods_list.json", function(data) {
    					$.each(data, function(index, info) {
    						if(index==0) {
    							firstGoodsObj=info;
    							showgGoodsInfo(firstGoodsObj,firstNameSpec);
    							console.log("第一个商品="+JSON.stringify(firstGoodsObj));
    						}
    						goodsList[index] = info;
    						skuIds[index] = info.itemId;
    						//console.log("商品=" + info);
    					});
    				});
    
    			}
    
    			/**
    			 * 获取sku最终组合id
    			 */
    
    			function getSpecIds() {
    				var ids = "";
    				var names = "";
    				$.each(specIds, function(index, info) {
    					ids = ids + specIds[index];
    					names = names + specNames[index];
    				});
    
    				console.log("##############------" + ids + "----" + names);
    				$.each(skuIds, function(index) {
    					if(ids == this) {
    						var obj = goodsList[index];
    						showgGoodsInfo(obj, names);
    					}
    				});
    
    			}
    
    			/**
    			 *展示商品数据
    			 * {"itemId":"1020","img":"258.jpg","name":"城市丽人","price":100.0}
    			 */
    			function showgGoodsInfo(jsonObj, spec) {
    				console.log("json="+JSON.stringify(jsonObj));
    				$masterImg.attr("src", jsonObj.img);
    				$smallImg.attr("src", jsonObj.img);
    				$skuName.html(jsonObj.name);
    				$skuPrice.html("¥" + jsonObj.price);
    				$skuSpec.html(spec);
    			}
    		</script>
    
    		<title>SKU商品规格</title>
    	</head>
    
    	<body>
    
    		<div class="outer-div">
    			
    			<div class="left-div">
    				<img id="master-img" class="master-img" alt="商品主图" />
    			</div>
    
    			
    			<div class="right-div">
    
    				<img id="small-img" class="right-top-img" alt="规格图" />
    
    				<div class="right-top-div">
    
    					<div class=".right-top-span">
    						<span id="sku-name">请新版连衣裙</span></br>
    					</div>
    
    					<div class="right-top-span">
    						<span id="sku-spec">39号红色</span></br>
    					</div>
    
    					<div class="right-top-span">
    						<span id="sku-price">￥129.00</span>
    					</div>
    				</div>
    
    				
    				<div id="sku-spec-contanier" class="right-bottom-div">
    				</div>
    
    			</div>
    		</div>
    	</body>
    
    </html>

[70]: /images/20220515/fd5be2ee5a1f4cf4a6cde19fc69cadbb.png
[70 1]: /images/20220515/009e7a2a0ebf4f839f885e1f5f3f855e.png