javascript - 计算更改输入的新值

Question

我有 2 个输入，我想每周计算一次到每两周一次，反之亦然。所以在改变时我想计算新值。我没有得到正确的值(每周更改需要每两周的值乘以二，每两周更改需要每周的值除以二并且它只触发一次(每次更改后需要更新)。

HTML:

<div class="frequencies">
<div>
   Weekly<br />
  <input class="weekly" type="text" value="1000" />
</div>

  <br /><br />
  <div>
    Fortnightly<br />
    <input class="fortnightly" type="text" value="2000" />
  </div>

</div>

J查询:

var weekly = $("input.weekly").val(),
    fortnightly = $("input.fortnightly").val();

w2f = parseFloat(weekly, 10) * 2;
f2w = parseFloat(fortnightly, 10) / 2;

$("input.weekly").on("change paste", function() {
  $(this).closest('.frequencies').find('input.fortnightly').val(w2f);
});

$("input.fortnightly").on("change paste", function () {
  $(this).closest('.frequencies').find('input.weekly').val(f2w);
});

下面是一小段代码:https://jsfiddle.net/nh12du38/3/

这应该是一件简单的事情，但我没有看到。我做错了什么？

Answer 1

您必须知道，如果您在监听器内的函数外部为变量赋值，则它的值只会在脚本加载时设置一次，并将保持该状态。

您必须在每个监听器中移动逻辑，因此如果发生了 change 或 paste 事件，变量将加载一个新的实际值。

$("input.weekly").on("change paste", function() {
  w2f = parseFloat($("input.weekly").val(), 10) * 2;
  f2w = parseFloat($("input.fortnightly").val(), 10) / 2;
  $(this).parent().parent().find('input.fortnightly').val(w2f);
});

$("input.fortnightly").on("change paste", function() {
  w2f = parseFloat($("input.weekly").val(), 10) * 2;
  f2w = parseFloat($("input.fortnightly").val(), 10) / 2;
  $(this).parent().parent().find('input.weekly').val(f2w);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="frequencies">
  <div>
    Weekly
    <br />
    <input class="weekly" type="text" value="1000" />
  </div>

  <br />
  <br />
  <div>
    Fortnightly
    <br />
    <input class="fortnightly" type="text" value="2000" />
  </div>

</div>