<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>商品SKU选择DEMO</title> </head> <body> <style type="text/css"> ul, li { padding: 0px; margin: 0px; } #panel { width: 500px; 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 id="panel_sel"> <div class="goods_attr"><span class="label">attr1</span> <ul> <li class="text goods_sku" val="10额"><span>10额</span><s></s></li> <li class="text goods_sku" val="11"> <span>11</span><s></s></li> </ul> </div> <div class="goods_attr"><span class="label">attr2</span> <ul> <li class="text goods_sku" val="20"><span>20</span><s></s></li> <li class="text goods_sku" val="21"><span>21</span><s></s></li> <li class="text goods_sku" val="22"><span>22</span><s></s></li> <li class="text goods_sku" val="23"><span>23</span><s></s></li> </ul> </div> <div class="goods_attr"><span class="label">attr3</span> <ul> <li class="text goods_sku" val="30"><span>30</span><s></s></li> <li class="text goods_sku" val="31"><span>31</span><s></s></li> <li class="text goods_sku" val="32"><span>32</span><s></s></li> </ul> </div> <div class="goods_attr"><span class="label">attr4</span> <ul> <li class="text goods_sku" val="40"><span>40</span><s></s></li> <li class="text goods_sku" val="41"><span>41</span><s></s></li> </ul> </div> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> //SKU，Stock Keeping Uint(库存量单位) var sku_list = [ {'sku_key': '10额;20;30;40', 'id': 120, 'store_nums': 100, 'sell_price': '10.7'}, {'sku_key': '10额;21;30;40', 'id': 10, 'store_nums': 1540, 'sell_price': '45.7'}, {'sku_key': '10额;22;30;40', 'id': 28, 'store_nums': 150, 'sell_price': '72.7'}, {'sku_key': '10额;22;31;41', 'id': 220, 'store_nums': 1050, 'sell_price': '85.7'}, {'sku_key': '10额;22;32;40', 'id': 130, 'store_nums': 106, 'sell_price': '543.7'}, {'sku_key': '10额;22;32;41', 'id': 135, 'store_nums': 1530, 'sell_price': '324.7'}, {'sku_key': '11;23;32;41', 'num': 120, 'store_nums': 160, 'sell_price': '14.7'}, {'sku_key': '11;22;32;41', 'num': 120, 'store_nums': 160, 'sell_price': '14.7'}, ]; //获取所有包含指定节点的路线 function filterProduct(ids) { var result = []; $(sku_list).each(function (k, v) { _attr = ';' + v['sku_key'] + ';'; _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); //console.log(products); var result = []; $(products).each(function (k, v) { result = result.concat(v['sku_key'].split(';')); }); return result; } //已选择的节点数组 function _getSelAttrId() { var list = []; $('.goods_attr .goods_sku.sel').each(function () { list.push($(this).attr('val')); }); return list; } $('.goods_attr .goods_sku').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 = $('.goods_sku.sel').parents('.goods_attr'); // step 1 var all_ids = filterAttrs(select_ids); //比较选择的规格个数是否和键值个数是否一样 if ($('.goods_sku.sel').length == all_ids.length) { //根据键值查询数据对应信息,并赋值 $.each(sku_list, function (idx, obj) { sel_sku_key = all_ids.join(';'); console.log(sel_sku_key); if (obj['sku_key'] == sel_sku_key) { console.log('价格' + obj['sell_price']) $('#sell_price').text(obj['sell_price']); $('#store_nums').text(obj['store_nums']); $('#sku_id').val(obj['id']); } }); } else { $('#sku_id').val(''); } //获取未选择的 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)); }); }); function update_2($goods_attr) { // 若该属性值 $li 是未选中状态的话，设置同级的其他属性是否可选 var select_ids = _getSelAttrId(); var $li = $goods_attr.find('.goods_sku.sel'); var select_ids2 = del_array_val(select_ids, $li.attr('val')); 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('.goods_sku').each(function (k2, li2) { if ($.inArray($(li2).attr('val'), all_ids) == -1) { $(li2).addClass('b'); } else { $(li2).removeClass('b'); } }); } function del_array_val(arr, val) { //去除 数组 arr中的 val ，返回一个新数组 var a = []; for (k in arr) { if (arr[k] != val) { a.push(arr[k]); } } return a; } </script> </body> </html>