<div id="sku"></div>
<div id="result"></div>
#sku input[type=button].selected{
color: red;
}
// 渲染DOM
function initDOM(key){
var html = '';
$(key).each(function(index, el) {
html += '<div>';
html += '<label>' + this.name + ':</label>';
$(this.item).each(function(index, el) {
html += '<input type="button" class="sku" value="' + this + '">';
});
html += '</div>';
});
$('#sku').html(html);
}
// 显示库存和价格
function showCountAndPrice(resultSKU){
var sku = [];
$('#sku div').each(function(index, el) {
sku.push($(this).children('.selected').val() || '');
});
sku = sku.join(';');
$('#result').html('');
if(resultSKU[sku] != undefined){
$('#result').html('库存:' + resultSKU[sku].count + '<br>' + '价格:' + resultSKU[sku].price);
}
}
$(function(){
// 属性集
var key = [
{name: '颜色', item: ['黑', '金', '白']},
{name: '内存', item: ['16G', '32G']},
{name: '运营商', item: ['电信', '移动', '联通']}
];
// 数据集
var sku = {
'黑;16G;电信': {price: 100, count: 10},
'黑;16G;移动': {price: 101, count: 11},
'黑;16G;联通': {price: 102, count: 0},
'黑;32G;电信': {price: 103, count: 13},
'黑;32G;移动': {price: 104, count: 14},
'黑;32G;联通': {price: 105, count: 0},
'金;16G;电信': {price: 106, count: 16},
'金;16G;移动': {price: 107, count: 17},
'金;16G;联通': {price: 108, count: 18},
'金;32G;电信': {price: 109, count: 0},
'金;32G;移动': {price: 110, count: 20},
'金;32G;联通': {price: 111, count: 21},
'白;16G;电信': {price: 112, count: 0},
'白;16G;移动': {price: 113, count: 23},
'白;16G;联通': {price: 114, count: 24},
'白;32G;电信': {price: 115, count: 0},
'白;32G;移动': {price: 116, count: 26},
'白;32G;联通': {price: 117, count: 27}
};
initDOM(key);
$('#sku input[type=button]:not(:disabled)').click(function(event) {
$(this).toggleClass('selected').siblings().removeClass('selected');
showCountAndPrice(sku);
});
});
This Pen doesn't use any external CSS resources.