CSS flex-grow的值没有响应点击事件

我做了一个简单的单位换算器，将像素值转换为相对比率值，然后将这些比率数字设置为'flex-grow'属性值（在屏幕截图的右上角）。CSS flex-grow的值没有响应点击事件

下面是截图。

calc screenshot

现在，这里是我得到了什么。

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]); 
    }); 
});

的问题是，在点击事件的每一个命令正确执行，除了改变$（”演示瓦。'）的柔性成长值输入一个[一世]。甚至更为奇怪的是，我可以用数字来表示'10'，而不是输入[i]，它会起作用。我还能够使用输入[i]成功设置每个框的文本值。我似乎无法让flex-grow属性接受输入[i]作为值。

来源

2013-12-17 Bryce Johnson

你测试了哪些浏览器？ – bjb568

只是在铬合金工作。我还没有真正测试过其他地方。但是flex-grow属性在页面上的其他地方工作... –

听起来很奇怪.-- – bjb568

我想通了！

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

最终的javascript：

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

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

});

来源

2013-12-18 01:52:56

CSS flex-grow的值没有响应点击事件

回答

相关问题