关于商城网站商品sku选择的js简易实现

网上找了一些大家提供的js，不太满意，主要原因是和我拿到手的json格式出入很大，导致改起来很麻烦，于是自己写了点

先上效果图，因为工程原有，带有其他样式插件，不好搬过来，所以这里自己简单画了点样式。

我处理过后的json数据如下：

{
    "spec_keys": [
        "颜色",
        "款式"
    ],
    "spec_kv": {
        "颜色": [
            "白色",
            "黑色",
            "橙色"
        ],
        "款式": [
            "豪华版",
            "标准版"
        ]
    },
    "spec_infos": [
        {
            "spec_info": "@-@黑色@-@标准版@-@",
            "sku_id": 111
        },
        {
            "spec_info": "@-@黑色@-@豪华版@-@",
            "sku_id": 112
        },
        {
            "spec_info": "@-@白色@-@标准版@-@",
            "sku_id": 113
        },
        {
            "spec_info": "@-@白色@-@豪华版@-@",
            "sku_id": 114
        },
        {
            "spec_info": "@-@橙色@-@标准版@-@",
            "sku_id": 115
        }
    ]
}

html代码就比较简单了

<label class="control-label">规格</label>
			<div class="spec-div"></div>
			<div  class="form-control">
										<span class="input-group-addon sku-name">随机</span>
										<span class="input-group-addon sku-name-lable">X</span>
										<span class="input-group-addon sku-count-btn" id="task-count-sub">-</span>
										<input type="text" id="taskCount" name="taskCount" value="0">
										<span class="input-group-addon sku-count-btn" id="task-count-add">+</span>
			</div>

js代码如下：

/** ******************************sku********************************************* */
var skuInfos;
var skuKeys;
$(function() {
	search_sku();
	$(".spec-div").delegate(".spec-uncheck", "click", function() {
		if(!$(this).hasClass("spec-invalid")){
		$(this).siblings(".spec-btn").removeClass("spec-check");
		$(this).siblings(".spec-btn").addClass("spec-uncheck");
		$(this).addClass("spec-check");
		$(this).removeClass("spec-uncheck");
		spec_invalid($(this));
		sku_confirm();
		}
	});

	$(".spec-div").delegate(".spec-check", "click", function() {
		if(!$(this).hasClass("spec-invalid")){
		$(this).addClass("spec-uncheck");
		$(this).removeClass("spec-check");
		spec_invalid_exit($(this));
		$(".sku-name").text("随机");
		}
	});

	$("#task-count-sub").on("click", function() {
		var intnum = $("#taskCount").val();
		if (intnum == 0) {
			return false;
		} else {
			intnum = parseInt(intnum) - 1;
		}
		$("#taskCount").val(intnum);
	});

	$("#task-count-add").on("click", function() {
		var intnum = $("#taskCount").val();
		intnum = parseInt(intnum) + 1;
		$("#taskCount").val(intnum);
	});
	

	$(".content").delegate(".task-export", "click", function() {
		$(this).removeClass("green-span");
		$(this).addClass("white-span");
		$(this).find("i").removeClass("white");
		$(this).find("i").addClass("black");
	});
})

function search_sku() {
	$("#search-sku").off("click");
	$("#search-sku").addClass("invalid-btn");
	$("#reset-sku").removeClass("invalid-btn");
	$("#taskTargetId").attr("readonly", "readonly");
	$("#reset-sku").off("click");
	$("#reset-sku").on("click", function() {
		reset_sku();
	});
	$
			.ajax({ // 使用jquery-form提交数据
				type : "POST",
				dataType : "json",
				url : "sku.json",
				async : true,
				success : function(data) {
					if (data.result == -100) {
						return false;
					} else {
						skuInfos = data.spec_infos;
						skuKeys = data.spec_keys;
						if (data.spec_keys.length == 0) {
							$("#taskSkuid").val(data.spec_infos[0].sku_id);
							$(".sku-name").text("无");
						} else {
							var skuhtml = "";
							for (var i = 0; i < data.spec_keys.length; i++) {
								skuhtml = skuhtml
										+ "<div class="spec-key-lable form-control">"
										+ data.spec_keys[i] + "</div>";
								console.log(data.spec_kv[data.spec_keys[i]]);
								skuhtml = skuhtml
										+ "<div class="spec-value-lable form-control">";
								for (var k = 0; k < data.spec_kv[data.spec_keys[i]].length; k++) {
									skuhtml = skuhtml
											+ "<span class="input-group-addon spec-btn spec-uncheck">"
											+ data.spec_kv[data.spec_keys[i]][k]
											+ "</span>";
								}
								skuhtml = skuhtml + "</div>";
							}
							$(".spec-div").append(skuhtml);
						}
						$(".task-info").show();
					}
				},
				error : function() {
				}
			});

}

function spec_invalid(specObj) {
	var btns = new Array();
	specObj.parent().siblings(".spec-value-lable").children(".spec-btn").each(
			function(key, value) {
				btns[key] = $(this).text();
				$(this).addClass("spec-invalid");
				$(this).removeClass("spec-uncheck");
				for (var i = 0; i < skuInfos.length; i++) {
					if (skuInfos[i].spec_info.indexOf("@-@" + specObj.text()
							+ "@-@") >= 0
							&& skuInfos[i].spec_info.indexOf("@-@" + btns[key]
									+ "@-@") >= 0) {
						$(this).removeClass("spec-invalid");
						$(this).addClass("spec-uncheck");
						break;
					}
				}
			});

}

function spec_invalid_exit(specObj) {
	var btns = new Array();
	specObj.parent().siblings(".spec-value-lable").children(".spec-btn").each(
			function(key, value) {
				btns[key] = $(this).text();
				var isSpec = false;
				for (var i = 0; i < skuInfos.length; i++) {
					if (skuInfos[i].spec_info.indexOf("@-@" + specObj.text()
							+ "@-@") >= 0
							&& skuInfos[i].spec_info.indexOf("@-@" + btns[key]
									+ "@-@") >= 0) {
						isSpec = true;
						break;
					}
				}
				if (!isSpec) {
					$(this).removeClass("spec-invalid");
					$(this).addClass("spec-uncheck");
				}
			});
}

function sku_confirm() {
	var skuid = 0;
	var checkSkuInfo = "";
	for (var i = 0; i < skuInfos.length; i++) {
		var btns = new Array();
		checkSkuInfo = "";
		var selectedCount = 0;
		$(".spec-check").each(function(key, value) {
			btns[key] = $(this).text();
			if (skuInfos[i].spec_info.indexOf("@-@" + btns[key] + "@-@") >= 0) {
				selectedCount = selectedCount + 1;
				checkSkuInfo = checkSkuInfo + btns[key] + " ";
			}
		})
		if (selectedCount == skuKeys.length) {
			skuid = skuInfos[i].sku_id;
			break;
		}
	}
	if (selectedCount == skuKeys.length) {
		skuid = skuInfos[i].sku_id;
		console.log("id=" + skuid + " " + checkSkuInfo)
		$(".sku-name").text(checkSkuInfo);
		$("#taskSkuid").val(skuid);
		$("#taskName").val(checkSkuInfo);
	} else {
		$(".sku-name").text("随机");
		$("#taskSkuid").val(0);
		$("#taskName").val("");
	}
}

这里大致把代码贴一下，最后获取数据，定义两个隐藏的input即可，taskSkuid和taskName 这样这个规格数据基本就拿到了