商城sku选择组合

组合"/>

商城sku选择组合

整了2天，终于出来了,具体看代码，注释

<script type="text/javascript" src="js/jquery-3.0.0.js"></script><script type="text/javascript">var startTime = new Date().getTime();//后台读取结果集var p_json = {"1:颜色": {"1:1001": "红色","1:1002": "绿色","1:1003": "蓝色","1:1004": "黑色","1:1005": "白色"},"2:内存": {"2:2001": "16G","2:2002": "32G","2:2003": "64G","2:2004": "128G","2:2005": "256G"},"3:产地": {"3:3006": "国产","3:3007": "港产","3:3008": "日产","3:3009": "欧美"}}var data = {"1:1001,2:2001,3:3006": {price: 366,count: 46,img: ""},"1:1002,2:2001,3:3007": {price: 355,count: 422,img: ""},"1:1004,2:2001,3:3008": {price: 355,count: 422,img: ""},"1:1005,2:2001,3:3009": {price: 355,count: 422,img: ""},"1:1003,2:2001,3:3009": {price: 355,count: 422,img: ""},"1:1003,2:2002,3:3009": {price: 355,count: 422,img: ""},"1:1002,2:2002,3:3008": {price: 355,count: 422,img: ""},"1:1003,2:2003,3:3009": {price: 355,count: 422,img: ""},"1:1003,2:2004,3:3009": {price: 355,count: 422,img: ""},"1:1003,2:2005,3:3009": {price: 355,count: 422,img: ""},"1:1002,2:2002,3:3009": {price: 355,count: 422,img: ""},"1:1003,2:2002,3:3008": {price: 355,count: 422,img: ""},"1:1003,2:2003,3:3008": {price: 355,count: 422,img: ""}}/*选中状态的button的attr_id属性值的数组*/var key = [];//点击事件$(function() {$(".sku").click(function() {/*标签属性：属性值*/var this_attr = $(this).attr("attr_id");/*属性选中*/if ($(this).hasClass("sku-select")) {/*移除变色样式*/$(this).removeClass("sku-select");/*集合去掉属性:属性值*/remove_key(key, this_attr);} else {/*行变色样式清空*/$(this).parent().children().removeClass("sku-select");/*自身添加变色样式*/$(this).addClass("sku-select");var key_cop=key;/*数组增加属性：属性值*/check_key(key, this_attr);}//可选中按钮筛选enable_select(key);/*数组转字符串显示*/var _key = key.toString();//显示用户的组合元素var value = view_key(key);//满足一个SKU组合if (data.hasOwnProperty(_key)) {$("#u_select").html("已选择:" + value + "库存:" + data[key].count + "价格:" + data[key].price);} else {$("#u_select").html("已选择:" + value);}});}); /*替换key中已存在的本组属性的值，并排序*/function check_key(key, this_attr) {if (!key.length) {key.push(this_attr);return key;}var _att = this_attr.split(":");var _AttKey = "" + _att[0]var _index = -1;for (var j = 0; j < key.length; j++) {var arrA = key[j].split(":");if (arrA[0] == _AttKey) {key.splice(j, 1);break;}}key.push(this_attr);key.sort();}/*删除key中已存在的本组属性的值，并排序*/function remove_key(key, this_attr) {if (!key.length) {return;}var _att = this_attr.split(":");var _AttKey = "" + _att[0]for (var j = 0; j < key.length; j++) {var arrA = key[j].split(":");if (arrA[0] == _AttKey) {key.splice(j, 1);break;}}key.sort();}//获取选择的数据的值function view_key(key) {var result = "";if (!key.length) {return result;}for (var a = 0; a < key.length; a++) {var temp = key[a];var s = temp.split(":")[0];for (var p_json_key in p_json) {var p_json_key_arr = p_json_key.split(":");if (s == p_json_key_arr[0]) {var value = p_json[p_json_key][temp];break;}}result += value + " ";}return result;}/**设置所有按钮的可选择* 已选属性组和未选属性组分开处理*key:所有选中状态的sku值数组，["1:2001","2:2002"]*attr:当前点击按钮的attr_id属性值,  "1:2001"*/function enable_select(key) {//如果key的长度为1，则这个选中状态的按钮的同组按钮都可选var attr_arr=[];var attr_key='';if(key.length==1){attr_arr = key[0].split(":");attr_key = attr_arr[0];}//先把所有按钮都不可选$(".sku").attr("disabled", true);//可选的按钮的属性值数组var able = [];/** 未选属性，匹配已选属性的正则表达式*///正则表达式var reg = '';var a = 0;if (key.length) {for (var json_key in p_json) {var json_key_arr = json_key.split(":");var key_arr = key[a].split(":");if (key_arr[0] == json_key_arr[0]) {reg = reg + key[a];if (key.length - 1 > a) {a++;reg += ',';}} else {reg += '[0-9:,]*';}}}var zz = new RegExp(reg);//遍历所有datafor (var data_key in data) {//匹配正则表达式if (zz.test(data_key)) {var data_key_arr=data_key.split(",");//符合的正则表达式的项，保存未选属性的按钮for(var data_key_arr_i in data_key_arr){if(!contains( data_key_arr[data_key_arr_i],key)){able.push(data_key_arr[data_key_arr_i])}}}}/** 已选属性，每一组已选属性的每一个所属按钮的值，与另外的已选属性值组合进行匹配，如匹配后的结果在data中有项，则可点击* */if (key.length > 1) {for (var key_i in key) {//得到本次循环要查询的属性组var key_arr = key[key_i].split(":");var key_arr_key = key_arr[0];//得到key的复制数组，直接处理key的话，key的值会改变var key_cop = key.slice(0);remove_key(key_cop, key[key_i]);//正则表达式var reg2 = '';var b = 0;for (var json_key in p_json) {var json_key_arr = json_key.split(":");var key_cop_arr = key_cop[b].split(":");if (key_cop_arr[0] == json_key_arr[0]) {reg2 = reg2 + key_cop[b];if (key_cop.length - 1 > b) {b++;reg2 += ',';}} else {reg2 += '[0-9:,]*';}}var zz2 = new RegExp(reg2);for (var data_key in data) {if (zz2.test(data_key)) {var data_key_arr=data_key.split(",");for(var data_key_arr_i in data_key_arr){var data_key_arr_arr=data_key_arr[data_key_arr_i].split(":");//只保存本次循环要查询的属性组中的值if(data_key_arr_arr[0]==key_arr_key){able.push(data_key_arr[data_key_arr_i]);}}}}}}//遍历所有按钮for(var i=0;i<100;i++){var sku_v = $('.sku')[i];var s=$('body').find( sku_v );//按钮的attr_id属性var str = $(s).attr("attr_id");if (typeof(str) != "undefined") {var str_arr = str.split(":");if (contains(str, able)||(str_arr[0]==attr_key&&key.length==1)) {$(s).attr("disabled", false);}}else{break;}}//已选中状态的按钮可以用$(".sku-select").attr("disabled", false);}//判断arr数组是否包含strfunction contains(str, arr) {var i = arr.length;while (i--) {if (arr[i] === str) {return true;}}return false;}//对p_json进行排序function sortJson(j) {var str = JSON.stringify(j)str = str.substring(1);str = str.substring(0, str.length - 2);var str_arr = str.split("},");str_arr.sort();str = str_arr.join("},");str = "{" + str + "}}";return JSON.parse(str);}</script>颜色：内存：产地：