计算更改的输入的新值

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> 

的Jquery：

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>