Вычислить общее количество из массива значений по JQuery

Question

У меня есть массив значений, который я вычислил сумму за элемент.

<?php 
    $items = array(); 
    $items[0] = array('item 1',3); 
    $items[1] = array('item 2',5); 
    $items[2] = array('item 3',2); 
?> 
<div> 
    <?php 
     foreach($items AS $k=>$item) { 
      print($item[0]." ".$item[1]); 
      print("<input cost='$item[1]' type='text' id='qnty_$k' >"); 
      print("<span id='amt_$k'></span>"); 
      print("<p>"); 
    ?> 
      <script> 
       $('#qnty_<?php print($k); ?>').on('input', function() { 
        var qnty = $('#qnty_<?php print($k); ?>').val(); 
        var cost = $(this).attr('cost'); 

        $('#amt_<?php print($k); ?>').html(qnty*cost); 
       }); 

      </script> 
    <?php   
     } 
    ?> 
    <div id="gtotal"> </div> 

</div> 

Количество работ на строку, но я хочу получить общее количество и отобразить его в id = "gtotal". как это сделать?

Answer 1

Вы имеете в виду это:

$('#qnty_<?php print($k); ?>').on('input', function() { 
    var qnty = $(this).val(); 
    var cost = $(this).attr('cost'); 
    $('#amt_<?php print($k); ?>').html((qnty*cost).toFixed(2)); 
    var total = 0; 
    $('[id^="amt_"]').each(function() { 
    var val = $(this).html(); 
    total += isNaN(val) || $.trim(val)==""?0:parseInt(val); 
    }); 
    $("#totalamt").html(total.toFixed(2); 
}); 

Однако я изменил HTML немного, добавив класс для ввода и амта и изменить атрибут экономичных данных цены и иметь это сейчас:

$(function() { 
 
    $('.inp').on('input', function() { 
 
    var qnty = $(this).val(); 
 
    var cost = $(this).data('cost'); 
 
    $(this).next().html((qnty * cost).toFixed(2)); 
 
    var total = 0; 
 
    $('.amt').each(function() { 
 
     var val = $(this).text(); 
 
     console.log(val) 
 
     total += isNaN(val) || $.trim(val)=="" ? 0 : parseFloat(val); 
 
    }); 
 
    $("#gtotal").html(total.toFixed(2)); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <p> 
 
    <input data-cost='1.10' type='text' class="inp" id='qnty_0'><span class="amt" id='amt_0'></span> 
 
    </p> 
 
    <p> 
 
    <input data-cost='1.20' type='text' class="inp" id='qnty_1'><span class="amt" id='amt_1'></span> 
 
    </p> 
 
    <p> 
 
    <input data-cost='1.30' type='text' class="inp" id='qnty_2'><span class="amt" id='amt_2'></span> 
 
    </p> 
 
    <p> 
 
    <input data-cost='1.40' type='text' class="inp" id='qnty_3'><span class="amt" id='amt_3'></span> 
 
    </p> 
 
    <p> 
 
    <input data-cost='1.50' type='text' class="inp" id='qnty_4'><span class="amt" id='amt_4'></span> 
 
    </p> 
 
</div> 
 

 
<div id="gtotal"></div>