商品sku
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>商品SKU选择DEMO</title> </head> <body> <style type="text/css"> ul, li { padding: 0px; margin: 0px; } #panel { width: 600px; margin: 30px auto; } .goods_attr { overflow: hidden; } .goods_attr .label { font: 12px/30px '宋体'; color: #777; width: 50px; ; padding-right: 10px; float: left; display: block; } .goods_attr ul { float: left; width: 300px; } .goods_attr li { color: #333; overflow: hidden; position: relative; float: left; text-align: center; vertical-align: middle; border: 1px solid #999; text-indent: 0; cursor: pointer } .goods_attr li.b { border: 1px dotted #CCC; color: #DDD; pointer: none; } .goods_attr li.b img { opacity: 0.4; } .goods_attr li.sel { border: 1px solid #c80a28; color: #333; } .goods_attr li.text { margin: 5px 10px 5px 0; height: 23px; line-height: 23px; text-indent: 0; padding: 0 23px; font-style: normal; } .goods_attr li.img { margin-right: 10px; width: 35px; height: 35px; line-height: 35px; text-align: center; } </style> <div id="panel"> <div>價格:<span id="mycount">0元</span></div> <div id="panel_sel"> </div> </div> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> <!-- 商品参数 --> var keys = { '颜色': ['白色', '黑色'], '码数': ['36', '37', '38', '39'], '款式': ['时尚', '复古', '简约'] }; //SKU,Stock Keeping Uint(库存量单位) var sku_list = [ { 'attrs': '白色|36|时尚', 'num': 120, 'id':'1_1_1' }, { 'attrs': '白色|37|复古', 'num': 120, 'id':'1_2_2' }, { 'attrs': '白色|37|简约', 'num': 120, 'id':'1_2_3' }, { 'attrs': '白色|38|简约', 'num': 120, 'id':'1_3_3' }, { 'attrs': '黑色|36|复古', 'num': 10, 'id':'2_1_2' }, { 'attrs': '黑色|37|时尚', 'num': 10, 'id':'2_2_1' }, ]; /**init start */ //显示html结构 function show_attr_item() { var html = ''; for (k in keys) { html += '<div > <span>' + k + '</span>'; html += '<ul>' for (k2 in keys[k]) { _attr_id = keys[k][k2]; html += '<li val="' + _attr_id + '" >'; html += '<span>' + _attr_id + '</span>'; html += '<s></s>'; html += '</li>' } html += '</ul>'; html += '</div>'; } $('#panel_sel').html(html); } show_attr_item(); initAttr(); /**init end */ //初始化节点 function initAttr(){ var inits = filterAttrs([]); set_block($('.goods_attr'),inits); } //获取所有包含指定节点的路线 function filterProduct(ids) { var result = []; $(sku_list).each(function(k, v) { _attr = '|' + v['attrs'] + '|'; _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); } }); console.log(ids); return result; } //获取 经过已选节点 所有线路上的全部节点 // 根据已经选择得属性值,得到余下还能选择的属性值 function filterAttrs(ids) { var products = filterProduct(ids); var result = []; $(products).each(function(k, v) { result = result.concat(v['attrs'].split('|')); }); return result; } //已选择的节点数组 function _getSelAttrId() { var list = []; $('.goods_attr li.sel').each(function() { list.push($(this).attr('val')); }); return list; } $('.goods_attr li').click(function() { if ($(this).hasClass('b')) { return; //被锁定了 } if ($(this).hasClass('sel')) { $(this).removeClass('sel'); } else { $(this).siblings().removeClass('sel'); $(this).addClass('sel'); } //已选择的节点数组 var select_ids = _getSelAttrId(); //已经选择了的规格 var $_sel_goods_attr = $('li.sel').parents('.goods_attr'); // step 1 var all_ids = filterAttrs(select_ids); //获取未选择的规格 var $other_notsel_attr = $('.goods_attr').not($_sel_goods_attr); //设置为选择属性中的不可选节点 $other_notsel_attr.each(function() { set_block($(this), all_ids); }); //step 2 //设置已选节点的同级节点是否可选 $_sel_goods_attr.each(function() { update_2($(this)); }); //****完成选择后执行 if (select_ids.length === $('.goods_attr').length) { var sku = {} var attrs = select_ids.join("|"); $.each(sku_list,function(index,item){ if(item['attrs'] == attrs){ sku = item; return false; } }); }else{ var attrs = select_ids.join("|"); } }); // 若该属性值 $li 是未选中状态的话,设置同级的其他属性是否可选 function update_2($goods_attr) { var select_ids = _getSelAttrId(); var $li = $goods_attr.find('li.sel'); var select_ids2 = del_array_val(select_ids, $li.attr('val')); var all_ids = filterAttrs(select_ids2); set_block($goods_attr, all_ids); } //根据 $goods_attr下的所有节点是否在可选节点中(all_ids) 来设置可选状态 function set_block($goods_attr, all_ids) { $goods_attr.find('li').each(function (k2, li2) { if ($.inArray($(li2).attr('val'), all_ids) == -1) { $(li2).addClass('b'); } else { $(li2).removeClass('b'); } }); } //去除 数组 arr中的 val ,返回一个新数组 function del_array_val(arr, val) { var a = []; for (k in arr) { if (arr[k] != val) { a.push(arr[k]); } } return a; } </script> </body> </html>