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

Question

keyup功能正常工作。 现在我想要的是，在键盘功能执行计算后，如果我继续并更改选择选项，则根据所选选项执行计算而不再键入，除非我可能想要更改金额。

提前感谢。

请问fiddle

  $('#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

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

class Acte_Mariage(models.Model):

    fk_epoux = models.ForeignKey(Person, related_name='Epoux', verbose_name='Epoux', null=False)
    fk_epouse = models.ForeignKey(Person, related_name='Epouse', verbose_name='Epouse', null=False)

    fk_father_husband = models.ForeignKey(Person, related_name='Pere Epoux+', verbose_name='Pere Epoux', null=False)
    fk_mother_husband = models.ForeignKey(Person, related_name='Mere Epoux+', verbose_name='Mere Epoux', null=False)
    fk_father_wife = models.ForeignKey(Person, related_name='Pere Epouse+', verbose_name='Pere Epouse', null=False)
    fk_mother_wife = models.ForeignKey(Person, related_name='Mere Epouse+', verbose_name='Mere Epouse', null=False)

    fk_temoin1 = models.ForeignKey(Person, related_name='Temoin 1+', verbose_name='Temoin 1', null=True)
    fk_temoin2 = models.ForeignKey(Person, related_name='Temoin 2+', verbose_name='Temoin 2', null=True)
    fk_temoin3 = models.ForeignKey(Person, related_name='Temoin 3+', verbose_name='Temoin 3', null=True)
    fk_temoin4 = models.ForeignKey(Person, related_name='Temoin 4+', verbose_name='Temoin 4', null=True)

    mairie = models.CharField(max_length=30, null=False, verbose_name='Mairie', default='  ')

    mariage_date = models.DateField(null=True, blank=True, verbose_name='Date du mariage (optionnel)')
    mariage_heure = models.TimeField(null=True, blank=True, verbose_name='Heure du mariage (optionnel)')

    created = models.DateTimeField(auto_now_add=True)
    utilisateur = models.CharField(max_length=100, null=False, verbose_name="utilisateur", default=" ")

Answer 2

您应该创建两个functions。

＆＃13;

＆＃13;

 $('#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;
    }
     }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;