PX到EM转换器

Question

我正在创建一个简单的px到em转换器。我已经开始工作，但是将结果限制在小数点后三位。我试图使用toFixed（3）方法，但每当我包含它时，变量就会停止添加到html中。

这是一个小提琴http://jsfiddle.net/nowlesy/usr5c0ac/

继承人的HTML

PX到EM转换器

<div id="base">
<h2>Enter a base pixel size</h2>
<input id="baseSize" value="126" maxlength="4"><p>px</p>
</div>

<div id="px">
<input id="pxInput" value="16" maxlength="4"><p>px</p>
<div id="emOutput2"></div>
</div><p>em</p>

<div id="Em">
<input id="emInput" value="1" maxlength="4"><p>em</p>
<div id="pxOutput2">
</div><p>px</p></div>

和js

$(document).ready(function(){

$("#pxInput").keyup(function(){
     var emOutput = function (){ return $('#pxInput').val()/$('#baseSize').val();};
     $('#emOutput2').html(emOutput);
});
$("#emInput").keyup(function(){
     var pxOutput = function (){ return $('#emInput').val()/$('#baseSize').val();};
     $('#pxOutput2').html(pxOutput);
});


$("#baseSize").keyup(function(){
     var pxOutput = function (){ return $('#emInput').val()/$('#baseSize').val();};
     $('#pxOutput2').html(pxOutput);


     var emOutput = function (){ return $('#pxInput').val()/$('#baseSize').val();};
     $('#emOutput2').html(emOutput);
});

 var baseSize2= $('#baseSize').val();
 var pxInput = $('#pxInput').val();
 var emInput =$('#emInput').val();
 var emOutput = function (){ return pxInput/baseSize2;};
 var pxOutput = function (){return emInput*baseSize2;};

 ('#baseSize').attr('value', baseSize2);
 $('#pxInput').attr('value', pxInput);
 $('#emInput').attr('value', emInput);
 $('#pxOutput2').html(pxOutput);
 $('#emOutput2').html(emOutput);

 });

感谢您的帮助

Answer 1

在您的代码中，您将pxOutput作为返回值的函数。 jQuery可以解决这个问题，但是在一个函数上调用.toFixed()不会起作用。我个人会用这样的东西替换整个方法（demo）：

var pxOutput = (parseInt($('#emInput').val(), 10)/parseInt($('#baseSize').val(), 10)).toFixed(3);

您也可以开始将其概括为如下函数：

function convert(input) {
    return (parseInt(input.val(), 10) / parseInt($('#baseSize').val(), 10)).toFixed(3);
};

无法将固定（3）添加到变量中

PX到EM转换器

1 个答案: