Question

我试图构建一个非常简单的双向货币转换器。

我目前有这个HTML：

    <input id="amount" name="amount" type="text" value="0" />

    <input id="result" name="discount" type="text" value="0" />

和这个javascript：

    $('input').on("click",function () {
    $("#result").val(parseInt($("#amount").val(), 10) *  520);
    });

我希望转换器能够双向工作，以便用户可以在任一字段like this中输入金额。

Answer 1

您正在寻找的是$.change()事件

所以你的代码看起来像这样：

$("#amount").change(function() {
    //do your conversions here...
    } );

然后对其他#result字段执行相同的操作

Answer 2

触发on keyup。这样，如果＃amount-box被触发，你会在#result框中得到结果，反之亦然。

<input id="amount" name="amount" type="text" value="0" />
<input id="result" name="discount" type="text" value="0" />

和

$("#amount").keyup(function(){
    var calculated = $(this).val() * 2;
    $("#result").val(calculated);
});

$("#result").keyup(function(){
    var calculated = $(this).val() / 2;
    $("#amount").val(calculated);
});

Answer 3

您仍然可以拥有一个事件处理程序，但使用change事件并使用已更改输入的ID检查您应该更新的输入。

$('input').on("change",function () {
  if (this.id === 'result') {
    $("#amount").val(parseInt($("#result").val(), 10) /  520);
  } else if (this.id === 'amount') {
    $("#result").val(parseInt($("#amount").val(), 10) *  520);
  }
});

如何获得双向单位/货币转换器？

3 个答案: