商城网站商品sku选择的js简易实现
<!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>價格：<span id="mycount">0元</span></div> <div id="panel_sku_list"> <pre></pre> </div> <div id="panel_sel"> </div> </div> <script src="./js/jquery-1.9.1.min.js"></script> <script type="text/javascript"> /* 属性集 下面一共有4个属性 属性item1 下面有 2个属性值 分别是 10,11 （举个常见的例子 属性尺码 下有 S M L XL 4个属性值 ） */ var keys = { 'attr1': ['10', '11'], 'attr2': ['20', '21', '22', '23'], 'attr3': ['30', '31', '32'], 'attr4': ['40', '41'] }; //SKU，Stock Keeping Uint(库存量单位) var sku_list = [ { 'attrs': '10|20|30|40', 'num': 120 }, { 'attrs': '10|21|30|40', 'num': 10 }, { 'attrs': '10|22|30|40', 'num': 28 }, { 'attrs': '10|22|31|41', 'num': 220 }, { 'attrs': '10|22|32|40', 'num': 130 }, { 'attrs': '11|23|32|41', 'num': 120 }, ]; /**init start */ //显示html结构 function show_attr_item() { var html = ''; for (k in keys) { html += '<div class="goods_attr" > <span class="label">' + k + '</span>'; html += '<ul>' for (k2 in keys[k]) { _attr_id = keys[k][k2]; html += '<li class="text" val="' + _attr_id + '" >'; html += '<span>' + _attr_id + '</span>'; html += '<s></s>'; html += '</li>' } html += '</ul>'; html += '</div>'; } $('#panel_sel').html(html); } //显示数据 function show_data(sku_list) { var str = ""; for (k in sku_list) { str += sku_list[k]['attrs'] + " " + sku_list[k]['num'] + " "; } $('#panel_sku_list pre').html(str); } show_data(sku_list); show_attr_item() /**init end */ //获取所有包含指定节点的路线 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); } }); return result; } //获取 经过已选节点 所有线路上的全部节点 // 根据已经选择得属性值，得到余下还能选择的属性值 function filterAttrs(ids) { var products = filterProduct(ids); //console.log(products); 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')); console.log($(this).attr('val')) console.log(list) if(list.length === 4) { let mycount = document.getElementById('mycount'); mycount.innerText = '45元' } }); 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)); }); }); function update_2($goods_attr) { // 若该属性值 $li 是未选中状态的话，设置同级的其他属性是否可选 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); } function set_block($goods_attr, all_ids) { //根据 $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'); } }); } 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>
源代码链接：https://blog.csdn.net/csdn924618338/article/details/51455595
我在源代码基础上加了一点点点点点点点。。。。