Javascript:奇怪的类型转换

Question

我有以下代码来简单地更改数字值:

//zoom select
var zoom = 1;
$('select#zoom').change(function(e) {
    zoom = $(this).val();       
    console.log('zooming to: ', Math.floor(zoom*100), '%'); 
});

//zoom incremental  
$(document).keypress(function(e) {
    //out
      if(e.keyCode == 45){
        if (zoom > 0) zoom = parseInt(zoom,10) - 0.1;
        $('select#zoom').val(zoom);
        console.log('zooming to: ', Math.floor(zoom*100), '%'); 
        console.log('Type:',typeof zoom,' ',toString(zoom)); //*flag
      }
    //in
      if(e.keyCode == 43){
        if (zoom < 2) zoom = parseInt(zoom,10) + 0.1;
        $('select#zoom').val(zoom);
        console.log('zooming to: ', Math.floor(zoom*100), '%');
        console.log('Type:',typeof zoom,' ',toString(zoom)); //*flag
      }
    
});

当按键事件触发时，它的行为与预期一致，但是如果我开始使用 select 元素，然后按一个键来更改值，输出将如下所示:

zooming to: 50%

zooming to: NaN%

Type: number [object Window]

HTML:

<select id="zoom">
            <option value="2">200%</option>
            <option value="1.5">150%</option>
            <option value="1.25">125%</option>
            <option value="1" selected>100%</option>
            <option value=".75">75%</option>
            <option value=".5">50%</option>
            <option value=".25">25%</option>            
        </select>

这让我发疯。有什么想法吗？

提前致谢。

Answer 1

您应该使用parseFloat而不是parseInt

parseInt(".25"); // returns NaN, because first char is not a valid char considering we are reading integer
parseFloat(".25") // returns 0.25

另请注意，对于整数(例如 "2"、"1")，您的解决方案有效。尝试解析 float 时失败 (".25")