<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);
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js