使用 jQuery 循环输入值并创建总和

Question

我的页面中有 comments/reviews。每个评论都有包含值的隐藏输入字段。我想要实现的是循环遍历这些值（已分配类），然后对这些值求和。

<input type="hidden" class="value1" value="20" />
<input type="hidden" class="value2" value="30" />
<input type="hidden" class="value1" value="20" />
<input type="hidden" class="value2" value="30" />
<input type="hidden" class="value1" value="20" />
<input type="hidden" class="value2" value="30" />

然后我有跨度，我想在其中输出汇总值，例如：

<span class="value1sum">60</span>
<span class="value2sum">90</span>

如何实现一个循环，循环遍历类 (".value1") 和 (".value2") 的值，将它们相加并将结果放入范围类 (".value1sum") 和 (".value2sum")？非常感谢您！

我能想到的是：

$(".value1").each(function(i, obj) {
   //? 
});
$("value1sum").html(i);

Answer 1

var sumv1=0;
var sumv2=0;
$(".value1,.value2").bind().each(function(index, obj) {

    if($(this).hasClass("value1"))
     sumv1+=parseInt($(this).val());

    if($(this).hasClass("value2"))
     sumv2+=parseInt($(this).val());
});

  $(".value1sum").html(sumv1);
  $(".value2sum").html(sumv2);

更新：我更喜欢将可重用性和可维护性的逻辑分开

function calculateSum(sourceClassSelector, targetSumClassSelector){
    var sum =0;
    $(sourceClassSelector ).each(function() {   
         sum +=parseInt($(this).val());
    });
    $(targetSumClassSelector).html(sum);
}

calculateSum(".value1",".value1sum");
calculateSum(".value2",".value2sum");

使用 jQuery 循环输入值并创建总和

Looping through input values with jQuery and creating Total Sum

forms

jquery

calculated-field