変更された入力の新しい値の計算を行います

Question

私は2週間ごとに週ごとに計算したいと思います。だから私はNEW値を計算したいと思います。週ごとに2の値を乗算する必要があり、2週間に2回の値を変更する必要があり、毎週2回の値を必要とし、1回だけ発生します（毎回の変更後に更新する必要があります）。

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

リスナー内の関数外の変数に値を割り当てる場合、その値はスクリプトのロード時に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>