前端jquery实现商城sku效果

fengchengwu2012

已于 2024-01-25 23:42:15 修改

阅读量4.9k

点赞数 2

分类专栏： web 文章标签：前端 jquery javascript

于 2018-08-28 16:34:36 首次发布

本文链接：https://blog.csdn.net/fengchengwu2012/article/details/82121471

版权

web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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

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>

				<!-- sku详情 -->
				<div id="sku-spec-contanier" class="right-bottom-div">
				</div>

			</div>
		</div>
	</body>

</html>