javascript - CSS flex-grow值不响应click事件

我做了一个简单的单位转换器，将像素值转换为相对比率值，然后获取这些比率值并将其设置为一系列框的“ 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]);
    });
});

问题是，除了将$（'。demo-tile'）的flex-grow值更改为input [i]的命令以外，click事件中的每个命令都正确执行。使它变得更奇怪的原因是，我可以输入一个数字值，例如“ 10”，而不是输入[i]，它将起作用。我还能够使用输入[i]成功设置每个框的文本值。我似乎无法获得flex-grow属性来接受input [i]作为值。

最佳答案

我想到了！

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

最终的javascript：

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

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

});