整了2天,终于出来了,具体看代码,注释
SKU
<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);
//遍历所有data
for (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数组是否包含str
function 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>
颜色:
内存:
产地: