Вычисления и триггер onchange с результатом записи в html

Question

Мне нужно, чтобы #totalcost всегда заполнялся. Есть несколько вычислений javascript, и результат записывается в #общую стоимость. Я попытался разместить его на JSFiddle, но я не имел успеха с функцией запуска onload. для каждого изменения поля ввода номера .localTotal устанавливается как localTotal * number value. В 2-х словах мне нужно .localTotal и #totalcost всегда заполнены

.localTotal с .price * .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() запускается при загрузке, но, несмотря на $ (". 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');

Также я не уверен, что вы подразумеваете под «всегда заполненным». Я думаю, что нам не хватает контекста :)

EDIT

Я надеюсь, вы не возражаете, но я переработан код немного

$(".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); 
});