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

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

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>

Answer 2

我会将我的数据设置为类似于您的第二个选项，但是因为他们首先关心的是尺寸（您无法更改您的鞋码），我会显示尺寸的可用颜色，而不是可用的颜色大小。您首先会列出所有可用性，因为如果客户知道可能有9号绿色“快乐鞋”，他们可能会在稍后回来购买。然后，您将遍历可用选项以更改该大小或颜色是否可用。

以下是数据设置：

var objShoes = [{
    name: 'Happy Shoe',
    sizes: [9,10,11,12,13],
    colours: ['red','blue','green'],
    available: [{
        size: 9,
        colours: ['red']
    },{
        size: 10,
        colours: ['red', 'blue']
    },{
        size: 11,
        colours: ['blue']
    },{
        size: 12,
        colours: ['red', 'blue']
    },{
        size: 13,
        colours: ['red']
    }]
}, {
    name: 'Scary Shoe',
    sizes: [8,9,10,11,12],
    colours: ['black','grey'],
    available: [{
        size: 8,
        colours: ['black']
    }]
}];

Here's an example of how that could work，虽然我使用了选择框而不是单选按钮。他们更整洁：）。

Answer 3

IMHO更容易将数据本身与属性定义分开，而不是在属性之间具有层次结构。为此，您需要每个属性值都具有唯一ID。

在这个例子中，我使用数组中每个属性的索引作为id来从availability对象引用它。

{
    attributes: [
        {value: "red",   type: "colour"}, // 0
        {value: "green", type: "colour"}, // 1
        {value: "black", type: "colour"}, // 2
        {value: "brown", type: "colour"}, // 3

        {value: 40, type: "size"}, // 4
        {value: 41, type: "size"}, // 5
        {value: 42, type: "size"}, // 6
        {value: 43, type: "size"}, // 7
        {value: 44, type: "size"}, // 8

        {value: true,  type: "with_shoelace"}, // 9
        {value: false, type: "with_shoelace"}, // 10
    ],

    products: [
        {
            name: 'some random shoe',
            availability: {
                0: [4, 7, 8, 9], // red is compatible with 40, 43 and 44, only with shoelace
                1: [4, 5, 9, 10], // green is compatible with 40, 43 and 44, with or without shoelace
                ...
                6: [2, 3, 9, 10], // 42 can be black or brown, with or without shoelace
                7: [0, 1, 10], // 43 can be red or green, without shoelace
                ...
                10: [1, 4, 6, 7, 8], // ...
            }
        },
        {
            name: 'another shoe',
            availability: {
                ...
            }
        }
    ]
}

在GUI上，您必须与每个已检查属性的availability数组相交，以确定哪个选项可用。

根据数据动态查看

3 个答案: