網上找了一些大家提供的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("");
}
}