Berechne die Summe aus dem Array von Werten nach JQuery

Question

Ich habe ein Array von Werten, die ich die Menge pro Element berechnet habe.

<?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> 

Die Menge funktioniert pro Zeile, aber ich möchte die Gesamtsumme erhalten und es in id = "gtotal" anzeigen. wie es geht?

Answer 1

Sie dies bedeuten:

$('#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); 
}); 

Jedoch habe ich den HTML-Code ein wenig durch das Hinzufügen einer Klasse zur Eingabe und amt und verändert die Kostenattribut, um Daten-Kosten und haben dies jetzt geändert haben:

$(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>