console 命令行工具 X clear

console

var skuList = [{
					SkuId: 51,
					SkuName: "重量",
					ValueList: [
						{ ValueId: 110, ValueName: "15g" },
						{ ValueId: 109, ValueName: "25g" },
					]
				},
				{
					SkuId: 10243628,
					SkuName: "大小",
					ValueList: [
						{ ValueId: 10243731, ValueName: "x" },
						{ ValueId: 10243732, ValueName: "m" },
						{ ValueId: 10243733, ValueName: "l" },
					]
				},
				{
					SkuId: 1001,
					SkuName: "颜色",
					ValueList: [
						{ ValueId: 100101, ValueName: "黄色" },
						{ ValueId: 100102, ValueName: "绿色" },
						{ ValueId: 100103, ValueName: "蓝色" },
					]
				}
			];
			var skuSelectList = [
				{ Sku: "61_110_10243731_100101", Price: 1212.00, "Stock": 12 },
				{ Sku: "61_110_10243732_100102", Price: 21.00, "Stock": 9 },
				{ Sku: "61_110_10243733_100103", Price: 121.00, "Stock": 1 },
				{ Sku: "61_109_10243731_100101", Price: 212.00, "Stock": 5 },
				{ Sku: "61_109_10243732_100102", Price: 1.00, "Stock": 8 },
				{ Sku: "61_109_10243733_100103", Price: 12.00, "Stock": 7 }
			];
			//商品ID
			var pid = 61;
			$(function() {
				
				
				skuInit();
				
				$("#btn1").on("click", function() {
					$(".sku_box").show();
				})
				$(".sku_close").on("click",function(){
					$(".sku_box").hide()
				})
				priceAndStock(0)
				$(".sku_list").on("click", "li", function() {
					if($(this).hasClass('sku_none')) {
						return; //被锁定了
					}
					$(this).toggleClass("active");
					if($(this).hasClass('active')) {
						$(this).siblings("li").removeClass("active");
					}

					//将选择的选项的valueID组成一个新的数组
					var select_ids = _getSelAttrId();
					//获取选择了规格的父元素，这是一个集合
					var $_sel_goods_attr = $('li.active').parents('.sku_list');
					// step 1
					var all_ids = filterAttrs(select_ids);
					//获取未选择的
					var $other_notsel_attr = $('.sku_list').not($_sel_goods_attr);
					//					//设置为选择属性中的不可选节点
					$other_notsel_attr.each(function() {
						set_block($(this), all_ids);

					});
					//设置已选节点的同级节点是否可选
					$_sel_goods_attr.each(function() {
						update_2($(this));
					});
					showSelectSku();

					if($(".sku_item").length == $("#sku_select .shop_sku").length) {
						var selectSku = getSelectSku();						
						priceAndStock(selectSku)
						
					}else{
						priceAndStock(0)
					}	
					checkShopNum()

				})

				//减号
				var num = 1
				$("#minus").on("click", function() {
					num--
					$("#shop_num").text(num--)
					checkShopNum()

				})
				//加号
				$("#plus").on("click", function() {
					num++
					$("#shop_num").text(num);
					checkShopNum()

				})
				//加入购物车
				$("#inputShopCart").on("click", function() {
					if($(".sku_item").length != $("#sku_select .shop_sku").length) {
						alert("请选择商品规格")
						return false;
					}
					//skuID
					var getSelectSkus = getSelectSku();
					var num = parseInt($("#shop_num").text());
					
					alert("你选择的skuId为："+getSelectSkus +"，数量为："+num)
					
				})

			})
			//获取最后选择的规格
			function getSelectSku(){
				var result;
				result = pid;
				$("#sku_select .shop_sku").each(function(k, v) {
					result += "_" + $(v).attr("valueid");
				})
				return result;
			}
			
			//判断库存量与价格
			function priceAndStock(n) {
				var maxStock = 0;
				var minprice = skuSelectList[0].Price;
				for(var i = 0; i < skuSelectList.length; i++) {
					maxStock += skuSelectList[i].Stock;
					minprice = minprice < skuSelectList[i].Price ? minprice : skuSelectList[i].Price
					
					//console.log(n)
					if(skuSelectList[i].Sku == n) {
						$("#proStock").text(skuSelectList[i].Stock);
						$("#proPrice").text(skuSelectList[i].Price)
						return false;
					} else {
						$("#proStock").text(maxStock);
						$("#proPrice").text(minprice);
					}
				}
			}

			function skuInit() {
				if(skuList.length == 0) {
					return false;
				}

				//生成规格选择列				
				$(".sku_bd").empty();
				for(var i = 0; i < skuList.length; i++) {
					var skuItem = $('<div class="sku_item"></div>')
					var label = $('<label skuId="' + skuList[i].SkuId + '">' + skuList[i].SkuName + '</label>')
					var ulList = $('<ul class="sku_list"  id="sku_list' + i + 1 + '">')

					var d = skuList[i].ValueList
					for(var j = 0; j < d.length; j++) {
						var lis = $('<li valueId="' + d[j].ValueId + '">' + d[j].ValueName + '</li>')
						ulList.append(lis);
					}
					skuItem.append(label);
					skuItem.append(ulList);
					$(".sku_bd").append(skuItem);

				}

			}
			//获取所有包含指定节点的路线
			function filterProduct(ids) {
				var result = [];
				$(skuSelectList).each(function(k, v) {
					_attr = '_' + v.Sku + '_';
					_all_ids_in = true;
					for(k in ids) {
						if(_attr.indexOf('_' + ids[k] + '_') == -1) {
							_all_ids_in = false;
							break;
						}
					}

					if(_all_ids_in) {
						result.push(v);
					}

				});
				return result;
			}

			//获取 经过已选节点 所有线路上的全部节点
			// 根据已经选择得属性值，得到余下还能选择的属性值
			function filterAttrs(ids) {
				var products = filterProduct(ids);
				var result = [];
				$(products).each(function(k, v) {
					result = result.concat(v['Sku'].split('_'));

				});
				return result;
			}

			//已选择的节点数组
			function _getSelAttrId() {
				var list = [];
				$('.sku_list li.active').each(function() {
					list.push($(this).attr('valueId'));
				});
				return list;
			}

			function update_2($goods_attr) {
				// 若该属性值 $li 是未选中状态的话，设置同级的其他属性是否可选
				var select_ids = _getSelAttrId();
				var $li = $goods_attr.find('li.active');

				var select_ids2 = del_array_val(select_ids, $li.attr('valueId'));

				var all_ids = filterAttrs(select_ids2);

				set_block($goods_attr, all_ids);
			}

			function set_block($goods_attr, all_ids) {

				//根据 $goods_attr下的所有节点是否在可选节点中（all_ids） 来设置可选状态
				$goods_attr.find('li').each(function(k2, li2) {

					if($.inArray($(li2).attr('valueId'), all_ids) == -1) {
						$(li2).addClass('sku_none');
					} else {
						$(li2).removeClass('sku_none');
					}

				});

			}

			function del_array_val(arr, val) {
				//去除 数组 arr中的 val ，返回一个新数组
				var a = [];
				for(k in arr) {
					if(arr[k] != val) {
						a.push(arr[k]);
					}
				}
				return a;
			}
			//生成显示的规格数
			function showSelectSku() {
				$("#sku_select").empty();
				$(".sku_list").each(function(i, item) {
					var m = $(item).find(".active")
					var sp = $('<span></span>');
					sp.attr("valueId", m.attr("valueId"))
					sp.text(m.text())
					if(m.text().length != 0) {
						sp.addClass("shop_sku")
					}
					$("#sku_select").append(sp)
				})
			}
			//判断选择库存量的值
			function checkShopNum() {
				//判断选择数量是否大于一
				if(parseInt($("#shop_num").text()) <= 1) {
					$("#shop_num").text("1")
					$("#minus").addClass("minus_not")
				} else {
					$("#minus").removeClass("minus_not")
				}
				//判断选择数量是否大于库存量
				if(parseInt($("#shop_num").text()) >= parseInt($("#proStock").text())) {
					$("#shop_num").text($("#proStock").text());
					$("#plus").addClass("plus_not");
				} else {
					$("#plus").removeClass("plus_not");
				}
			}

<div class="sku_box">
			<div class="sku_close">×</div>
			<div class="sku_hd flex_box">
				<div class="img_box">
					<img src="" alt="这是商品图片"/>
				</div>
				<ul class="flex1">
					<li style="color: #057778;">￥<em id="proPrice">113</em></li>
					<li>
						<label>库存:</label>
						
						<span id="proStock">7</span></li>
					<li>
						<label>规格:</label>
						
						<span id="sku_select">
						<!--<span>超纤革白红</span><span>36</span>-->
						</span>
					</li>
				</ul>
			</div>
			<div class="sku_bd">
				<!--<div class="sku_item">
					<label>颜色</label>
					<ul class="sku_list"  id="sku_list1">
						<li class="active">超纤革白红</li>
						<li>网布白红</li>
						<li>超纤革鸳鸯色</li>
						<li>超纤革白红</li>
						<li>网布白红</li>
					</ul>
				</div>-->
			</div>
			<div class="sku_ft ">
				<div class="clearfix">
					<label>数量</label>
					<ul class="count clearfix">
						<!--加号-->
						<li class="plus" id="plus">+</li>
						<li id="shop_num">1</li>
						<!--减号-->
						<li class="minus minus_not" id="minus">-</li>
					</ul>
				</div>

				<button type="button" class="btn big_btn" id="inputShopCart">加入购物车</button>
			</div>

		</div>

		<footer>
			<button type="button" class="btn" id="btn1">加入购物车</button>
		</footer>

body {
				background-color: palegoldenrod;
				position: relative;
			}
footer {
	border: 1px solid red;
	height: 50px;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

.btn {
	padding: 0 15px;
	height: 35px;
	line-height: 35px;
	border: 1px solid #057778;
	font-size: 16px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #057778;
	color: #FFFFFF;
}
.big_btn{
	width: 98%;
	margin: 20px 1% 0 ;
}
.clearfix:after {content: "";display: block;visibility: hidden;height: 0;clear: both;}
.clearfix {zoom: 1;}
em,i{font-style:normal;}

/*强制换行*/

.noline {
	word-wrap: break-word;
	word-break: break-all;
}


/*不换行，以省略号结束*/

.line {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: keep-all;
}


/*flex盒子*/

.flex_box {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	-webkit-align-items: center;
}

.flex1 {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}
/*------------------------------------*/
.sku_box{
	background-color: #FFFFFF;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 10px 15px 15px 15px;
	font-size: 16px;
	z-index: 100;
	/*display: none*/
}
.sku_close{
	position: absolute;
	right: 10px;
	top: 10px;
	width: 30px;
	height: 30px;
	font-size: 32px;
	color: #CCCCCC;
}
.sku_hd{
	border-bottom: 1px solid #ddd;
	padding: 10px 0;
	font-size: 14px;
	color: #898989;
}
.img_box{
	width: 80px;
	height: 80px;
	margin-right: 10px;
}
.img_box img{
	width: 100%;
	height: 100%;
}
.sku_hd li{
	line-height: 1.8;
}
.sku_hd li span{
	margin-right: 10px;
}
.sku_hd li label{
	margin-right: 10px;
}
.sku_bd label,.sku_ft label{
	font-size: 14px;
	color: #898989;
	line-height: 30px;
}
.sku_item{
	border-bottom: 1px solid #ddd;
	padding: 10px 0;
}
.sku_list li{
	height: 35px;
	line-height: 35px;
	color: #333333;
	background-color: #EaEaEa;
	font-size: 16px;
	display: inline-block;
	padding: 0 15px;
	margin-top: 10px;
	margin-right: 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-size: 14px;
}
body .active{
	background-color: #057778;
	color: #FFFFFF;
}
body .sku_none{
	color: #ccc;
}
.sku_ft{
	padding: 10px 0;
}
.count{
	float: right;
}
.count li{
	float: right;
	text-align: center;	
}
.minus,.plus{
	width: 20px;
	border: 1px solid #000;
	color: #000000;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	height: 20px ;
	margin-top: 5px;
	font-size: 20px;
	line-height: 18px;

}
/*减号*/
.minus_not,.plus_not{
	border: 1px solid #CCCCCC;
	color: #CCCCCC;
}

.count li:nth-of-type(2){
	width: 60px;
	padding: 0 5px;
	line-height: 30px;
}

SOURCE

本项目引用的自定义外部资源