JavaScript 数组的求和？

Question

我看过很多不同版本的这个问题，但似乎没有一个特别适合我正在做的。

我有一些由php / mysql查询动态创建的输入字段。 值是数字，并且它们共享一个公共类。

<?php
   foreach ($garment_sizes as $key =>$value){echo '<input type="number" class="size_select" name="'.$value.'" onchange="qty_update()"/><label class="size_label">'. strtoupper($value).'</label>';
   }
?>

生成的HTML：

<input type="number" class="size_select" name="s" onchange="qty_update()"/>
<label class="size_label">S</label>
<input type="number" class="size_select" name="m" onchange="qty_update()"/>
<label class="size_label">M</label> <!-- etc -->

我想创建一个函数，用于求和所有带有 "size_select" 类的字段。

function qty_update(){
    var values = $('.size_select').serializeArray();
    //having trouble writing the loop here to sum the array..
}

- Daniel Hunter

---

只是好奇，你为什么需要序列化？JSON？ - j08691

嗯，我过去几个月一直在尝试学习jQuery，所以每当我想要尝试新的东西时，它都是我首选的地方。但我也很愿意接受更好的解决方案。 - Daniel Hunter

为什么需要序列化？ - Tamara Wijsman

我认为这是将未知数量的输入字段基于共同的类打包到数组中最简单的方法… - Daniel Hunter

Answer 1

如果要汇总与特定选择器匹配的所有字段，可以这样做：

var total = 0;
$('.size_select').each(function() {
    total += parseInt($(this).val(), 10) || 0;
});

// the variable total holds the sum here

函数形式：

function sumSizes() {
    var total = 0;
    $('.size_select').each(function() {
        total += parseInt($(this).val(), 10) || 0;
    });
    return(total);
}

- jfriend00

---

哇，那几乎就是我发布的内容。 - nrabinowitz

谢谢jfriend00。函数表单有效。你能帮我理解10 || 0吗？这是在做什么？ - Daniel Hunter

@DanielHunter - 请查看以下问题：https://dev59.com/smDVa4cB1Zd3GeqPfq-g 和 https://dev59.com/73RA5IYBdhLWcg3wuAYp - Jared Farrish

@DanielHunter - parseInt() || 0 的作用是将 parseInt() 的结果加到 total 中，如果 parseInt() 的结果不是真值（例如字段为空或不包含数字），则添加 0。这只是一个测试 parseInt() 结果的快捷方式，可以省去 if 语句，从而节省了很多代码行数。10 是传递给 parseInt() 的基数参数，几乎总是应该使用它，因为如果没有它，parseInt() 可能会根据内容猜测基数。 - jfriend00

Answer 2

这里有一种快速的方法。请注意，如果你正在使用jQuery，则通常应该使用jQuery来分配事件处理程序，因为它比直接在HTML标记中进行更灵活：

$('input.size_select').change(function() {
    var sum = 0;
    $('input.size_select').each(function() {
         sum += parseInt($(this).val()) || 0
    });
    console.log(sum);
});

- nrabinowitz

---

parseInt($(this).val) 应该改为 parseInt( $(this).val() )，对吗？ - j08691