使用 jQuery 循环输入值并创建总和 [关闭]答案

【问题标题】：Looping through input values with jQuery and creating Total Sum [closed]使用 jQuery 循环输入值并创建总和 [关闭]
【发布时间】：2019-10-07 10:05:02
【问题描述】：

我的页面中有 cmets/reviews。每个 cmets 都有隐藏的包含值的输入字段。我想要实现的是，遍历这些值（已分配类），然后总结这些值。

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

【问题讨论】：

发布的问题似乎根本不包括任何解决问题的尝试。 Stack Overflow 期待您 try to solve your own problem first，因为您的尝试有助于我们更好地了解您的需求。请编辑问题以显示您尝试过的内容，以说明您在minimal reproducible example 中遇到的特定障碍。欲了解更多信息，请参阅How to Ask 并拨打tour。
努力获得您想要的解决方案。我们是来帮助你的，而不是做你的功课
@арнонюм 如果你在谷歌上搜索，你会发现stackoverflow.com/questions/14142011/… 相当容易。

更多的javascript方式是

 valSum={ value1:0, value2:0 } document.querySelectorAll('.value1').forEach( (val)=>{ valSum.value1 += Number(val.value); }) document.querySelectorAll('.value2').forEach( (val)=>{ valSum.value2 +=Number(val.value); }) console.log(valSum) document.getElementByClass (value1sum).innerHTML =valSum.value1; document.getElementByClass(value2sum).innerHTML =valSum.value2;

标签： jquery forms calculated-field

【解决方案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");

【讨论】：

它易于使用一个循环而不是两个循环：var sumv1=0;变量 sumv2=0; $(".value1,.value2").bind().each(function(index, obj) { if($(this).attr('class')=="value1") sumv1+=parseInt($(this ).val()) if($(this).attr('class')=="value2") sumv2+=parseInt($(this).val()) }); $(".value1sum").html(sumv1); $(".value2sum").html(sumv2);
你是对的，你的解决方案更好，只是为了安全使用 .hasClass("value1")