jquery .on 根据所选值更改输入字段中的实时更新

Question

keyup 函数工作正常。现在我想要的是，在 keyup 功能执行计算后，如果我继续更改选择选项，请根据所选选项执行计算而无需再次键入，除非我想更改金额。

提前谢谢。

请是小提琴

  $('#buyselect').change(function() {
var value = $(this).val();
switch (value) {
  case 'btc':
    var rate = 4.7;
    var ngnrate = 5.7;
    var buyusd = $("#buyusd");
    buyusd.keyup(function() {
      var total = isNaN(parseInt(buyusd.val() * rate)) ? 0 : (buyusd.val() * rate);
      total1 = parseFloat(total).toFixed(2);
      $("#buyghc").val(total1);
      var ngntotal = isNaN(parseInt(buyusd.val() * ngnrate)) ? 0 : (buyusd.val() * ngnrate);
      ngntotal1 = parseFloat(ngntotal).toFixed(2);
      $("#buyngn").val(ngntotal1);
    });
    var buyghc = $("#buyghc");
    buyghc.keyup(function() {
      var total = isNaN(parseInt(buyghc.val() / rate)) ? 0 : (buyghc.val() / rate);
      total1 = parseFloat(total).toFixed(2);
      $("#buyusd").val(total1);
      var ngntotal = isNaN(parseInt(total1 * ngnrate)) ? 0 : (total1 * ngnrate);
      ngntotal1 = parseFloat(ngntotal).toFixed(2);
      $("#buyngn").val(ngntotal1);
    });
    var buyngn = $("#buyngn");
    buyngn.keyup(function() {
      var total = isNaN(parseInt(buyngn.val() / ngnrate)) ? 0 : (buyngn.val() / ngnrate);
      total1 = parseFloat(total).toFixed(2);
      $("#buyusd").val(total1);
      var ghctotal = isNaN(parseInt(total1 * rate)) ? 0 : (total1 * rate);
      ghctotal1 = parseFloat(ghctotal).toFixed(2);
      $("#buyghc").val(ghctotal1);
    });
    break;
  case 'gcr':
    var rate = 7;
    var ngnrate = 3;
    var buyusd = $("#buyusd");
    buyusd.keyup(function() {
      var total = isNaN(parseInt(buyusd.val() * rate)) ? 0 : (buyusd.val() * rate);
      total1 = parseFloat(total).toFixed(2);
      $("#buyghc").val(total1);
      var ngntotal = isNaN(parseInt(buyusd.val() * ngnrate)) ? 0 : (buyusd.val() * ngnrate);
      ngntotal1 = parseFloat(ngntotal).toFixed(2);
      $("#buyngn").val(ngntotal1);
    });
    var buyghc = $("#buyghc");
    buyghc.keyup(function() {
      var total = isNaN(parseInt(buyghc.val() / rate)) ? 0 : (buyghc.val() / rate);
      total1 = parseFloat(total).toFixed(2);
      $("#buyusd").val(total1);
      var ngntotal = isNaN(parseInt(total1 * ngnrate)) ? 0 : (total1 * ngnrate);
      ngntotal1 = parseFloat(ngntotal).toFixed(2);
      $("#buyngn").val(ngntotal1);
    });
    var buyngn = $("#buyngn");
    buyngn.keyup(function() {
      var total = isNaN(parseInt(buyngn.val() / ngnrate)) ? 0 : (buyngn.val() / ngnrate);
      total1 = parseFloat(total).toFixed(2);
      $("#buyusd").val(total1);
      var ghctotal = isNaN(parseInt(total1 * rate)) ? 0 : (total1 * rate);
      ghctotal1 = parseFloat(ghctotal).toFixed(2);
      $("#buyghc").val(ghctotal1);
    });
    break;
} });

Answer 1

您应该创建两个functions。

 $('#buyselect').change(function() {
        var value = $('#buyselect').val();
    switch (value) {
      case 'btc':
        var rate = 4.7;
        var ngnrate = 5.7;
        var buyusd = $("#buyusd");
          var total = isNaN(parseInt(buyusd.val() * rate)) ? 0 : (buyusd.val() * rate);
          total1 = parseFloat(total).toFixed(2);
          $("#buyghc").val(total1);
          var ngntotal = isNaN(parseInt(buyusd.val() * ngnrate)) ? 0 : (buyusd.val() * ngnrate);
          ngntotal1 = parseFloat(ngntotal).toFixed(2);
          $("#buyngn").val(ngntotal1);
        var buyghc = $("#buyghc");
          var total = isNaN(parseInt(buyghc.val() / rate)) ? 0 : (buyghc.val() / rate);
          total1 = parseFloat(total).toFixed(2);
          $("#buyusd").val(total1);
          var ngntotal = isNaN(parseInt(total1 * ngnrate)) ? 0 : (total1 * ngnrate);
          ngntotal1 = parseFloat(ngntotal).toFixed(2);
          $("#buyngn").val(ngntotal1);
        var buyngn = $("#buyngn");
          var total = isNaN(parseInt(buyngn.val() / ngnrate)) ? 0 : (buyngn.val() / ngnrate);
          total1 = parseFloat(total).toFixed(2);
          $("#buyusd").val(total1);
          var ghctotal = isNaN(parseInt(total1 * rate)) ? 0 : (total1 * rate);
          ghctotal1 = parseFloat(ghctotal).toFixed(2);
          $("#buyghc").val(ghctotal1);
        break;
      case 'gcr':
        var rate = 7;
        var ngnrate = 3;
        var buyusd = $("#buyusd");
          var total = isNaN(parseInt(buyusd.val() * rate)) ? 0 : (buyusd.val() * rate);
          total1 = parseFloat(total).toFixed(2);
          $("#buyghc").val(total1);
          var ngntotal = isNaN(parseInt(buyusd.val() * ngnrate)) ? 0 : (buyusd.val() * ngnrate);
          ngntotal1 = parseFloat(ngntotal).toFixed(2);
          $("#buyngn").val(ngntotal1);
        var buyghc = $("#buyghc");
          var total = isNaN(parseInt(buyghc.val() / rate)) ? 0 : (buyghc.val() / rate);
          total1 = parseFloat(total).toFixed(2);
          $("#buyusd").val(total1);
          var ngntotal = isNaN(parseInt(total1 * ngnrate)) ? 0 : (total1 * ngnrate);
          ngntotal1 = parseFloat(ngntotal).toFixed(2);
          $("#buyngn").val(ngntotal1);
        var buyngn = $("#buyngn");
          var total = isNaN(parseInt(buyngn.val() / ngnrate)) ? 0 : (buyngn.val() / ngnrate);
          total1 = parseFloat(total).toFixed(2);
          $("#buyusd").val(total1);
          var ghctotal = isNaN(parseInt(total1 * rate)) ? 0 : (total1 * rate);
          ghctotal1 = parseFloat(ghctotal).toFixed(2);
          $("#buyghc").val(ghctotal1);
        break;
    }
  });
     function change_value(){
    var value = $('#buyselect').val();
    switch (value) {
      case 'btc':
        var rate = 4.7;
        var ngnrate = 5.7;
        var buyusd = $("#buyusd");
        buyusd.keyup(function() {
          var total = isNaN(parseInt(buyusd.val() * rate)) ? 0 : (buyusd.val() * rate);
          total1 = parseFloat(total).toFixed(2);
          $("#buyghc").val(total1);
          var ngntotal = isNaN(parseInt(buyusd.val() * ngnrate)) ? 0 : (buyusd.val() * ngnrate);
          ngntotal1 = parseFloat(ngntotal).toFixed(2);
          $("#buyngn").val(ngntotal1);
        });
        var buyghc = $("#buyghc");
        buyghc.keyup(function() {
          var total = isNaN(parseInt(buyghc.val() / rate)) ? 0 : (buyghc.val() / rate);
          total1 = parseFloat(total).toFixed(2);
          $("#buyusd").val(total1);
          var ngntotal = isNaN(parseInt(total1 * ngnrate)) ? 0 : (total1 * ngnrate);
          ngntotal1 = parseFloat(ngntotal).toFixed(2);
          $("#buyngn").val(ngntotal1);
        });
        var buyngn = $("#buyngn");
        buyngn.keyup(function() {
          var total = isNaN(parseInt(buyngn.val() / ngnrate)) ? 0 : (buyngn.val() / ngnrate);
          total1 = parseFloat(total).toFixed(2);
          $("#buyusd").val(total1);
          var ghctotal = isNaN(parseInt(total1 * rate)) ? 0 : (total1 * rate);
          ghctotal1 = parseFloat(ghctotal).toFixed(2);
          $("#buyghc").val(ghctotal1);
        });
        break;
      case 'gcr':
        var rate = 7;
        var ngnrate = 3;
        var buyusd = $("#buyusd");
        buyusd.keyup(function() {
          var total = isNaN(parseInt(buyusd.val() * rate)) ? 0 : (buyusd.val() * rate);
          total1 = parseFloat(total).toFixed(2);
          $("#buyghc").val(total1);
          var ngntotal = isNaN(parseInt(buyusd.val() * ngnrate)) ? 0 : (buyusd.val() * ngnrate);
          ngntotal1 = parseFloat(ngntotal).toFixed(2);
          $("#buyngn").val(ngntotal1);
        });
        var buyghc = $("#buyghc");
        buyghc.keyup(function() {
          var total = isNaN(parseInt(buyghc.val() / rate)) ? 0 : (buyghc.val() / rate);
          total1 = parseFloat(total).toFixed(2);
          $("#buyusd").val(total1);
          var ngntotal = isNaN(parseInt(total1 * ngnrate)) ? 0 : (total1 * ngnrate);
          ngntotal1 = parseFloat(ngntotal).toFixed(2);
          $("#buyngn").val(ngntotal1);
        });
        var buyngn = $("#buyngn");
        buyngn.keyup(function() {
          var total = isNaN(parseInt(buyngn.val() / ngnrate)) ? 0 : (buyngn.val() / ngnrate);
          total1 = parseFloat(total).toFixed(2);
          $("#buyusd").val(total1);
          var ghctotal = isNaN(parseInt(total1 * rate)) ? 0 : (total1 * rate);
          ghctotal1 = parseFloat(ghctotal).toFixed(2);
          $("#buyghc").val(ghctotal1);
        });
        break;
    }
     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select class="form-control" id="buyselect">
  <option> </option>
  <option value="btc">BITCOIN</option>
  <option value="gcr">GCR COIN</option>
</select>
<div>
  <div class="form-group">
    <label for="amount">Amount in USD:</label>
    <input type="number" class="form-control" id="buyusd" onkeypress="return change_value()">
  </div>
</div>
<div>
  <div class="form-group">
    <label for="amount">Amount in GHC:</label>
    <input type="number" class="form-control" id="buyghc">
  </div>
</div>
<div>
  <div class="form-group">
    <label for="amount">Amount in NGN:</label>
    <input type="number" class="form-control" id="buyngn">
  </div>
</div>

Answer 2

创建一个通用函数，并在onchange和onkey up中调用该函数代码笔链接 https://codepen.io/kalaiselvan/pen/KqMPaK

      $(function(){
   $("#buyusd").keyup(function(){
       calculate();
   })
   $('#buyselect').change(function() {
        calculate();  
   }) 
});
function calculate(){
  var value = $("#buyselect").val();
     switch (value) {
          case 'btc':
            var rate = 4.7;
            var ngnrate = 5.7;
            var buyusd = $("#buyusd");
              var total = isNaN(parseInt(buyusd.val() * rate)) ? 0 : (buyusd.val() * rate);
              total1 = parseFloat(total).toFixed(2);
              $("#buyghc").val(total1);
              var ngntotal = isNaN(parseInt(buyusd.val() * ngnrate)) ? 0 : (buyusd.val() * ngnrate);
              ngntotal1 = parseFloat(ngntotal).toFixed(2);
              $("#buyngn").val(ngntotal1);

              var total = isNaN(parseInt(buyghc.val() / rate)) ? 0 : (buyghc.val() / rate);
              total1 = parseFloat(total).toFixed(2);
              $("#buyusd").val(total1);
              var ngntotal = isNaN(parseInt(total1 * ngnrate)) ? 0 : (total1 * ngnrate);
              ngntotal1 = parseFloat(ngntotal).toFixed(2);
              $("#buyngn").val(ngntotal1);
              var total = isNaN(parseInt(buyngn.val() / ngnrate)) ? 0 : (buyngn.val() / ngnrate);
              total1 = parseFloat(total).toFixed(2);
              $("#buyusd").val(total1);
              var ghctotal = isNaN(parseInt(total1 * rate)) ? 0 : (total1 * rate);
              ghctotal1 = parseFloat(ghctotal).toFixed(2);
              $("#buyghc").val(ghctotal1);
            break;
          case 'gcr':
            var rate = 7;
            var ngnrate = 3;
            var buyusd = $("#buyusd");
              var total = isNaN(parseInt(buyusd.val() * rate)) ? 0 : (buyusd.val() * rate);
              total1 = parseFloat(total).toFixed(2);
              $("#buyghc").val(total1);
              var ngntotal = isNaN(parseInt(buyusd.val() * ngnrate)) ? 0 : (buyusd.val() * ngnrate);
              ngntotal1 = parseFloat(ngntotal).toFixed(2);
              $("#buyngn").val(ngntotal1);

              var total = isNaN(parseInt(buyghc.val() / rate)) ? 0 : (buyghc.val() / rate);
              total1 = parseFloat(total).toFixed(2);
              $("#buyusd").val(total1);
              var ngntotal = isNaN(parseInt(total1 * ngnrate)) ? 0 : (total1 * ngnrate);
              ngntotal1 = parseFloat(ngntotal).toFixed(2);
              $("#buyngn").val(ngntotal1);

              var total = isNaN(parseInt(buyngn.val() / ngnrate)) ? 0 : (buyngn.val() / ngnrate);
              total1 = parseFloat(total).toFixed(2);
              $("#buyusd").val(total1);
              var ghctotal = isNaN(parseInt(total1 * rate)) ? 0 : (total1 * rate);
              ghctotal1 = parseFloat(ghctotal).toFixed(2);
              $("#buyghc").val(ghctotal1);
            break;
        }
 }