在每個函數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 ready handler來注冊事件處理程序而不是使用內聯事件處理程序。

<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);
  });
})

注意：如果您正在處理動態元素，那么您將不得不使用事件委派

演示： 小提琴

Answer 2

嘗試這個

    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'));
        (function (total) {
            $("#barang_total[]").val(total); 
        })(total);
     });  
     $('#total').val(total); 
}); 

Answer 3

您錯過了輸入ID，名稱為barang_total[] 。

試試這個，（我已經在jsbin中測試過，它有效）

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

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'));
    $(':input[id^="barang_total[]"]').val(total); //edited this line
  });  
  $('#total').val(total); 
  }); 
}

演示： http ： //jsbin.com/kijifisinu/edit？html，js，output