当在jquery中输入更改时更新变量

我试图创建一个简单的px到em转换器，当其中一个输入字段发生更改时，它会自动计算值。我已经有了计算值的代码，但是当值更改时它不会更新。当在jquery中输入更改时更新变量

继承人的HTML

<body> 
    <h1>PX to EM converter</h1> 

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

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

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

而且JS

$(document).ready(function() { 
    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); 
});

任何帮助将非常感激

来源

2015-03-02 user3806523

该代码将只在页面加载时运行一次，添加事件处理程序，如果你想根据用户输入更新 – charlietfl 2015-03-02 21:44:00

此刻，你已经没有什么可监听输入变化框。 jQuery的更改监听器非常简单。

$('#baseSize').change(function() { 
    // Code in here will run when the baseSize input is changed 
    // Note that this must be inside your jQuery ready/onload function. 
    // Note that this will **not** work with dynamically added elements 
});

此外，更新输入时，使用jQuery的值函数而不是访问属性。

$('#baseSize').attr('value', baseSize2); 
// Should be 
$('#baseSize').val(baseSize2);

来源

2015-03-02 21:42:49 Matt

我为您创建了一个JSFiddle here。

我已经将它设置在keyup事件：

$("#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); 
    });

来源

2015-03-02 21:45:25

大，非常感谢伟大回答！ – user3806523 2015-03-02 22:18:08

当在jquery中输入更改时更新变量

回答

相关问题