商城網站商品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'] + "\t" + sku_list[k]['num'] + "\n"; } $('#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
我在源代碼基礎上加了一點點點點點點點。。。。