javascript - 在每个函数jquery中设置另一个元素值

Question

我想在元素每个函数中设置另一个元素值。我的脚本(JS):

function getTotal() { $(':input[id^="barang_qty[]"]').keyup(function() {
var total = 0;
var $inputs = $(':input[id^="barang_qty[]"]');
$inputs.each(function (index) { total += parseFloat($(this).val()) *  parseFloat($(this).attr('data-price'));
         $("#barang_total[]").val(total); 
     });  
$('#total').val(total); 
}); 

HTML:

<td class="price">
                    <input type="text" name="barang_unit_price[]" readonly id="barang_unit_price[]" class="form-control">
                    </td>
                    <td>
                    <input type="text" name="barang_qty[]" id="barang_qty[]" onkeyup="getTotal()" class="form-control" >
                    </td>
                    <td>
                    <input type="text" name="barang_total[]" class="sum form-control" >
                    </td>

但是元素 barang_total 仍然是空的。

问候，谢谢

Answer 1

问题是您在 getTotal 方法中添加了一个 keyup 处理程序，因此第一个 key up 不做任何计算。

相反，您可以通过内联调用在 getTotal() 方法中进行计算

function getTotal() {
  var total = 0;
  var $inputs = $('input[name="barang_qty[]"]');
  $inputs.each(function(index) {
    var sum = parseFloat($(this).val()) * parseFloat($(this).attr('data-price')) || 0;
    total += sum;
    $(this).closest('tr').find('[name="barang_total[]"]').val(sum);
  });
  $('#total').val(total);
}

或者使用 dom 就绪处理程序来注册事件处理程序，而不是使用内联事件处理程序。

<input type="text" name="barang_qty[]" id="barang_qty[]" class="form-control" >

然后

jQuery(function() {
  $('input[name="barang_qty[]"]').keyup(function() {
    var total = 0;
    var $inputs = $('input[name="barang_qty[]"]');
    $inputs.each(function(index) {
      var sum = parseFloat($(this).val()) * parseFloat($(this).attr('data-price')) || 0;
      total += sum;
      $(this).closest('tr').find('[name="barang_total[]"]').val(sum);
    });
    $('#total').val(total);
  });
})

注意:如果你正在处理动态元素，那么你将不得不使用事件委托(delegate)

演示:Fiddle