当jquery中的输入更改时更新变量答案

【问题标题】：Updating a variable when input changes in jquery当jquery中的输入更改时更新变量
【发布时间】：2015-05-03 09:31:04
【问题描述】：

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

这是 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);
});

任何帮助将不胜感激

【问题讨论】：

该代码只会在页面加载时运行一次，如果您想根据用户输入进行更新，请添加事件处理程序

标签： javascript jquery html var

【解决方案1】：

目前，您无需监听输入框的更改。 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);

【讨论】：

【解决方案2】：

我已经为你创建了一个 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);
    });

【讨论】：