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 = [{name:'size',tags:'10,10.5,11,11.5'},{name:'color',tags:'red,blue'}]

Answer 2

您需要让浏览器/ JavaScript知道可用的选项。为此，您可以使用data- *属性，即

<input type='text' name='fred' data-colors='red,green,blue' data-size='x,s,m,l'>

然后，您可以使用JavaScript获取data- *元素并生成必要的项目。因为我使用逗号分隔数据，所以您需要从元素中获取值，然后将其除以您选择的控制字符，然后产生所需数量的必需选项。

创建像shopify这样的变体表

2 个答案: