jQuery/Javascript 复杂的元素迭代

Question

我们有一个表单，需要遍历一些元素以获得最终的总和，然后放入“总”元素中。 例如，这是一个有效的启动脚本。它不会迭代其他的。它不考虑下面的元素“item *”，但应该考虑。继续阅读。

<script>
$( document ).ready(function() {
    $('#taxsptotal').keyup(calcgrand);
    $('#shiptotal').keyup(calcgrand);
    $('#disctotal').keyup(calcgrand);

    function calcgrand() {
        var grandtot = parseFloat($('#subtotal').val(), 10)
        + parseFloat($("#taxsptotal").val(), 10)
        + parseFloat($("#shiptotal").val(), 10)
        - parseFloat($("#disctotal").val(), 10)

        $('#ordertotal').val(grandtot);
    }
});
</script>

我们正在为此添加更多内容。想象一个购物车中有很多物品，每个物品都有相同的元素，其中“i”是一个数字，表示单个物品。

<!-- ordertotal = sum of #subtotal, #taxptotal, #shiptotal and #disctotal -->
<input type="text" id="ordertotal" name="ordertotal" value="106.49">

<input type="text" id="taxsptotal" name="taxsptotal" value="6.72">
<input type="text" id="shiptotal" name="shiptotal" value="15.83">
<input type="text" id="disctotal" name="disctotal" value="0.00">

<!-- sum of the cart "itemtotal[i]" -->
<input type="text" id="subtotal" name="subtotal" value="83.94">

<!-- cart items
User can change any itemprice[i] and/or itemquantity[i]
itemtotal[i] = sum(itemquantity[i] * itemprice[i])
-->
<input type="text" name="itemtotal[1]" value="8.97" />
<input type="text" name="itemquantity[1]" value="3" />
<input type="text" name="itemprice[1]" value="2.99" />

<input type="text" name="itemtotal[2]" value="4.59" />
<input type="text" name="itemquantity[2]" value="1" />
<input type="text" name="itemprice[2]" value="4.59" />

<input type="text" name="itemtotal[3]" value="0.99" />
<input type="text" name="itemquantity[3]" value="10" />
<input type="text" name="itemprice[3]" value="9.90" />

(1) 用户可以更改任何 itemprice[i] 和/或 itemquantity[i]，因此每个都需要一个 keyup。我可以在 php 中执行此操作，因为它会遍历项目。

(2) 这些元素将有一个 $('.itemtotal[i]').keyup(calcgrand); （或 calcgrand 以外的函数，如果需要）声明。该 keyup 可以由 php 代码在评估购物车中的项目时添加。

(3) 当一个元素发生变化时，脚本应该自动 (a) 计算 $('[name="itemtotal[i]"]').val() 和 (b) 替换 $ ('[name="itemtotal[i]"]').val().

(4) 然后，上面的脚本将使用 $('[name="itemtotal[i]"]').val() 来 (a) 替换 #subtotal 值并 (b) 在等式。

有人可以帮我解决这个问题吗？我被困在如何迭代 [i] 元素上。

附言也感谢对​​上述代码的任何更正/增强。

Answer 1

将自定义类添加到所需的输入以求和：

HTML：

<input type="text" class="customclass" name=itemtotal[1] value="8.97" />
<input type="text" class="customclass" name=itemquantity[1] value="3" />
<input type="text" class="customclass" name=itemprice[1] value="2.99" />

JS：

var sum = 0;

    $.each('.customclass',function(i, item){
        sum = sum + Number($(this).val());
    })

alert(sum);

Answer 2

例如，如果您通过给输入一个类来对输入进行分组，或者像这样将每个组放在一个 div 中：

<!-- ordertotal = sum of #subtotal, #taxptotal, #shiptotal and #disctotal -->
<input type="text" id="ordertotal" name="ordertotal" value="106.49">

<input type="text" id="taxsptotal" name="taxsptotal" value="6.72">
<input type="text" id="shiptotal" name="shiptotal" value="15.83">
<input type="text" id="disctotal" name="disctotal" value="0.00">

<!-- sum of the cart "itemtotal[i]" -->
<input type="text" id="subtotal" name="subtotal" value="83.94">

<!-- cart items
User can change any itemprice[i] and/or itemquantity[i]
itemtotal[i] = sum(itemquantity[i] * itemprice[i])
-->
<div class="group">
    <input type="text" name="itemtotal[1]" value="8.97" />
    <input type="text" name="itemquantity[1]" value="3" />
    <input type="text" name="itemprice[1]" value="2.99" />
</div>

<div class="group">
    <input type="text" name="itemtotal[2]" value="4.59" />
    <input type="text" name="itemquantity[2]" value="1" />
    <input type="text" name="itemprice[2]" value="4.59" />
</div>

<div class="group">
    <input type="text" name="itemtotal[3]" value="0.99" />
    <input type="text" name="itemquantity[3]" value="10" />
    <input type="text" name="itemprice[3]" value="9.90" />
</div>

然后你可以在 javascript 中执行以下操作：

function calcSubTotal() {
  $('[name^="itemtotal"]').each(function(i){
      var sum = 0;
      $('[name^="itemtotal"]').each(function(i){
        sum += $(this).val();
      });
      $('#subtotal').val(sum);
  });
}

$('.group').each(function(i) {
    var total = $(this).find('[name^="itemtotal"]');
    var qnt = $(this).find('[name^="itemquantity"]');
    var price = $(this).find('[name^="itemprice"]');
    total.keyup(function(e){
        price.val(total.val() * qnt.val());
        calcSubTotal();
    });
    qnt.keyup(function(e){
        price.val(total.val() * qnt.val());
        calcSubTotal();
    });
});

Answer 3

$("[name^='itemprice'], [name^='itemquantity']").keyup(function(){
        var input_name = $(this).attr('name');
        var temp_name_split = input_name.split(/[\[\]]+/);
        var temp_total = parseInt($('[name="itemquantity['+temp_name_split[1] +']"]').val()) * parseFloat($('[name="itemprice['+temp_name_split[1] +']"]').val());
        $('[name="itemtotal['+temp_name_split[1]+']"]').val(temp_total.toFixed(2));
        var total = 0;
        $("[name^='itemtotal']").each(function() {
            total += parseFloat($(this).val()); 
        });
        $('#subtotal').val(total.toFixed(2));
    });