创建类似shopify的variants表

Question

你好，我正在使用jQuery标签输入库来创建像购物这样的变体选项，例如，每个产品都可以有特定的选项，比如颜色、大小……我有3个输入字段，每个输入都包含用户将在界面上输入的可变数量的标签，我如何将第一个输入中的标签数量(颜色)与第二行中的标签数量(大小)相乘

例如，颜色标签的数量X大小标签的数量

这是一个示例：

​

这是我的jQuery代码：

$('.tagline').on('change', function(){
    for(i = 0; i < $('.tagline').length; i++){
        // multiplicate line 1 width the line 2
    }
});

这是我的Html代码

<input type="text" class="form-control tagline tokenfield" value="">

我想生成一个这样的表：

​

Answer 1

你可以用笛卡尔乘积制作这个表格，就像我在angularjs中使用的那样

$scope.createVariation = function() {
        var tagsArr = [];
        for (var i = 0; i < $scope.optionsList.length; i++) {
            tagsArr[i] = $scope.optionsList[i].tags.split(',');
        }

        const cartesianProduct = (...arr) => {
            return arr.reduce((acc, val) => {
                return acc.map(el => {
                    return val.map(element => {
                        return el.concat([element]);
                    });
                }).reduce((acc, val) => acc.concat(val), []);
            }, [
                []
            ]);
        };

        var variationList = [];

        if ($scope.optionsList.length == 1) {
            variationList = cartesianProduct(tagsArr[0]);
        }
        if ($scope.optionsList.length == 2) {
            variationList = cartesianProduct(tagsArr[0], tagsArr[1]);
        }
        if ($scope.optionsList.length == 3) {
            variationList = cartesianProduct(tagsArr[0], tagsArr[1], tagsArr[2]);
        }

        $scope.makeVariationTable(variationList);
    }

    $scope.makeVariationTable = function(variationList) {
        $scope.variationListArray = [];
        for (var i = 0; i < variationList.length; i++) {
            $scope.variationListArray.push({
                'variant': variationList[i],
                'price': '',
                'sku': '',
                'barcode':''
            });
        }
    }

哪个$scope.optionsList是用户定义的选项数组。

$scope.optionsList ={名称：‘大小’，标签：‘10，10.5，11，11.5’}，{名称：‘颜色’，标签：‘红，蓝’}