根据数据动态查看

Question

对于一个对象具有多个属性,例如,鞋可具有不同的color,size和等

现在当我们试图展示鞋子,并让顾客可以选择不同的属性时,我们使用收音机(最简单的):https://jsfiddle.net/mwqy6217/

但是如何根据数据提供视图的可用性呢？

例如,当红色鞋子售罄时,red收音机应该是不可检查的.所以尺寸不同.

我们可以用这个数据结构代表鞋子:{shoe:{name:'',available:['red','black','40','41']}}.

然而,不同的属性可能彼此有关系,例如,40尺寸的红色鞋子已售罄,而40尺寸的黑色鞋子则没有.我认为这个数据结构:

{shoe:{name:'',available:{color:{red:[40,41,42]},black:[42,43]}}}

由于鞋子可能有其他属性,如"重量",属性可能有10多个选项.

那么如何在数据库中表示这种关系并让前工程师可以构建视图呢？

更新:

https://jsfiddle.net/xqtgqzt2/

查看现场演示,所有可用选项都预先定义为:

var options= [
    ["A1","B1","C1","D1"],
    ["A1","B3","D2"],
    ["A2","B1","C3","D2"]
];

现在如何根据选项更改单选按钮状态？例如,当选中A1时,只能检查(启用)B1 B3,当检查A1 B1时,只能检查C1 D1.

Answer 1

要显示有关选项多维数组的单选按钮，您可以执行以下操作：

var options = [
    ["A1", "B1", "C1", "D1"],
    ["A1", "B3", "D2"],
    ["A2", "B1", "C3", "D2"]
];
var firstLevel = [];
var selectedList = [];
//Enable first options, disable the others
$("input[type=radio]").each(function (indexInput) {
    var that = this;
    that.disabled = true;
    $.each(options, function (index, value) {
        firstLevel.push(value[0]);
        if (value[0] == that.value) {
            that.disabled = false;
        }
    });
});
//on check radio, change states
$("input[type=radio]").on("click", function () {
    var thatClicked = this;
    if (firstLevel.indexOf(thatClicked.value) !== -1) {
        $('input[type=radio]').removeAttr('checked');
        $(thatClicked).prop('checked', true);
    }
    var possibleOptions = [];
    selectedList.push(thatClicked.value);
    $.each(options, function (index, value) {

        possibleOptions = possibleOptions.concat(value[0]);
        var posInArray = value.indexOf(thatClicked.value);
        if (posInArray !== -1 && typeof value[posInArray + 1] !== 'undefined') {
            //check previous options
            $.each(selectedList, function (indexSelectedList, valueSelectedList) {
                if (value.indexOf(valueSelectedList) !== -1) {
                    possibleOptions = possibleOptions.concat(value[posInArray + 1]);
                }
            });

        }
    });
    $("input[type=radio]").each(function (indexInput) {
        if (possibleOptions.indexOf(this.value) !== -1) {
            this.disabled = false;
        } else {
            this.disabled = true;
        }
    });
});

.section {
    padding: 10px;
    overflow: hidden;
}
label {
    float: left;
    width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div class="section">
        <label>
            <input type="radio" value="A1" /> <span>A1</span>

        </label>
        <label>
            <input type="radio" value="A2" /> <span>A2</span>

        </label>
    </div>
    <div class="section">
        <label>
            <input type="radio" value="B1" /> <span>B1</span>

        </label>
        <label>
            <input type="radio" value="B2" /> <span>B2</span>

        </label>
        <label>
            <input type="radio" value="B3" /> <span>B3</span>

        </label>
    </div>
    <div class="section">
        <label>
            <input type="radio" value="C1" /> <span>C1</span>

        </label>
        <label>
            <input type="radio" value="C2" /> <span>C2</span>

        </label>
        <label>
            <input type="radio" value="C3" /> <span>C3</span>

        </label>
    </div>
    <div class="section">
        <label>
            <input type="radio" value="D1" /> <span>D1</span>

        </label>
        <label>
            <input type="radio" value="D2" /> <span>D2</span>

        </label>
    </div>
</div>
<div id="info">var options= [ ["A1","B1","C1","D1"], ["A1","B3","D2"], ["A2","B1","C3","D2"] ];</div>