計算並觸發onchange並將結果寫入html

Question

我需要總是填充#totalcost。有一些JavaScript計算，結果寫入#total成本。我試圖把它放在JSFiddle上，但我沒有成功觸發函數onload。對於.number輸入字段的每次更改.localTotal設置爲localTotal *數值。在2個字，我需要.localTotal和#totalcost總是充滿

.localTotal用。價格* .quantity和#totalcost所有.localTotals

的總和這裏的HTML

<div class="row"> <div class="col-xs-5"> 
<span class="glyphicon glyphicon-remove remove" style="cursor:pointer;"></span> Ventura L15220</div> 
<div class="col-xs-3 price">2020.20</div> 
<div class="col-xs-4"><input type="number" class="form-control quantity" value="1"></div> 
<div class="localTotal"></div></div> 

<div class="row"> 
<div class="col-xs-5"><span class="glyphicon glyphicon-remove remove" style="cursor:pointer;"></span> Ventura L15220</div> 
<div class="col-xs-3 price">30300.20</div><div class="col-xs-4"><input type="number" class="form-control quantity" value="1"></div> 
<div class="localTotal"></div></div> 

<div class="col-xs-4 head " id="totalcost"></div> 

和JavaScript

function changeQuantity(){ 
     $(".quantity").trigger("change"); 
     console.log("done") 

     $('.quantity').change(calculateTotal); 
     function calculateTotal(){ 
      $quantity=$(this); 

      $price=$quantity.closest('.row').find('.price').text(); 
      $quantityValue=$quantity.val(); 
      $localTotal=$quantity.closest('.row').find('.localTotal'); 
      $localTotalValue=$quantityValue*$price; 
      $quantity.closest('.row').find('.localTotal').text($localTotalValue); 
      console.log($localTotalValue); 
      var sumToTotal = 0; 
      var totalSum=document.getElementById('totalcost'); 
      $('.localTotal').each(function(){ 
       sumToTotal += parseFloat($(this).text()); 
      }); 
      totalSum.innerHTML=sumToTotal+' грн'; 
     } 

    } 

changeQuantity（）觸發onload，但不管$（「。quantity」）。trigger（「change」）; #totalcost和.localTotal未被填充：c

Answer 1

我認爲你會讓事情有點混亂。您正在綁定.quantity上的更改事件，但您正在觸發.number上的更改事件。另外我不知道爲什麼，但爲什麼你混合使用jQuery選擇器和'普通'選擇器？

我不知道你想要做什麼，但這裏的工作原理是：

$(".quantity").on('change', function() { 
    /* 
    * Your code 
    * replace your 'getElementById('total cost') => $("#totalcost") 
    * replace your 'totalSum.innerHTML' => totalSum.text(sumToTotal + ' грн'); 
    */ 
}); 

現在，當.quantity改變你的回調被炒魷魚。這可以通過手動觸發更改事件來完成：$('.quantity').trigger('change');

另外我不確定'always always filled'是什麼意思。我認爲，我們缺少一些背景:)

編輯

我希望你不介意，但我重構你的代碼一點點

$(".quantity").on('change', function() { 
    var context = $(this).closest('.row'); 
    // Calculate amount 
    var amount = parseFloat(context.find(".price").text()) * parseFloat($(this).text()); 

    // Set the amount 
    context.find('.localTotal').text(amount); 

    var total = 0; 
    $('.localTotal').each(function(el) { 
    total += parseFloat($(this).text()); 
    }); 
    $("#totalcost").text(total); 
});