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

但是我通过在输入和amt中添加一个类来改变HTML，并将cost属性更改为data-cost并立即执行此操作：

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

通过JQuery计算值数组的总和

1 个答案: