javascript - 如何将这两个确切的事件与不同的元素合并？

Question

我有两个元素，它们在执行时执行相同的功能。如何合并这些脚本使其更干净？

//e_jumlah script
$("#t_jps_item").on('keyup','.e_jumlah',function(){             
    var par_jml = $(this).val().replace(/,/g , '');
    var par_hrg = $(this).closest('tr').find('.e_harga').val().replace(/,/g , '');

    var total   = parseInt(par_jml) * parseFloat(par_hrg);

    $(this).closest('tr').find('.e_total').val(total.toLocaleString());
});

//e_harga script
$("#t_jps_item").on('keyup','.e_harga',function(){              

    var par_hrg = $(this).val().replace(/,/g , '');
    var par_jml = $(this).closest('tr').find('.e_jumlah').val().replace(/,/g , '');

    var total   = parseInt(par_jml) * parseFloat(par_hrg);

    $(this).closest('tr').find('.e_total').val(total.toLocaleString());
});

Answer 1

您可以向两个 DOM 添加一个公共(public)类，然后调用该类的函数。在该类中，您可以使用唯一类(或最好使用 id)来获取值。

$(".container").on('keyup','.input-item',function(){  
    var par_jml = $('.e_jumlah').val().replace(/,/g , '');
    var par_hrg = $('.e_harga').val().replace(/,/g , '');
    var total   = parseInt(par_jml) * parseFloat(par_hrg);

   var total   = parseInt(par_jml) * parseFloat(par_hrg);

    $('.total').val(total.toLocaleString());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input class="input-item e_jumlah" id="s1" placeholder="input1" value="0">
  <input class="input-item e_harga" id="s1" placeholder="input1" value="0">
  <input class="total">
</div>