CSS flex-grow值不响应click事件

Question

我制作了一个简单的单位转换器，将像素值转换为相对比值，然后获取这些比率数字，并将它们设置为一系列框的'flex-grow'属性的值（在屏幕截图的右上角） ）。

这是截图。

现在，这就是我所拥有的。

JS：

$('.calc-btn').click(function(){
    var inputs = [];
    $('.input-box input').each(function(){
        var num = parseFloat($(this).val());
        inputs.push(num);  
    });

    var minValue = Math.min.apply(Math,inputs); // get minimum value in array

    //calculation part
    for (i = 0; i < inputs.length; i++) {
        inputs[i] = (inputs[i] / minValue);
        inputs[i] = parseFloat(inputs[i].toFixed(2));
    }

    $('span.input-response').each(function(i){
        $(this).text(inputs[i]);
    });

    //here's where I'm running into trouble
    $('.demo-tile').each(function(i){
        $(this).css('flex-grow',inputs[i]);
    });

    $('.flex-grow-value').each(function(i){
        $(this).text(inputs[i]);
    });
});

问题是，click事件中的每个命令都正常执行，除了将$（'。demo-tile'）的flex-grow值更改为inputs [i]的命令。甚至更奇怪的是，我可以输入一个数字值，比如说'10'而不是输入[i]，它会起作用。我还能够使用输入[i]成功设置每个框的文本值。我似乎无法使flex-grow属性接受输入[i]作为值。

Answer 1

我明白了！

我需要将值转换为字符串，.css（）接受它。

最终的javascript：

$('.demo-tile').each(function(i){

        $(this).css('flex-grow',inputs[i].toString());

});