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的值沒有響應點擊事件

回答

相關問題