javascript - 如何总计具有相同类的文本框的值并使用jquery将其放入另一个文本框

Question

我如何汇总所有具有类 1 、 2 和 3 的文本框的值并将其放入 sum_1、sum_2 和 sum_3

我试过这种方式

Jquery 在这里:

   $(document).on("change", ".1", function() {
    var sum = 0;
    $(".1").each(function(){
        sum += +$(this).val();
    });
    $(".total").val(sum);
});

HTML 在这里:

<input type="text" class="1" value="1" />
<input type="text" class="2" value="2" />
<input type="text" class="3" value="5" />

这是 fiddle http://jsfiddle.net/5gsBV/36/这适用于一个值

但是我如何才能像我在这个 fiddle http://jsfiddle.net/vL6f2tow/1/ 中给出的问题中所问的那样对 3 个值执行此操作？

更新:

我怎样才能得到总和的那些值

Answer 1

如果你想在加载时做它，你可能应该做这样的事情

$('.item').each(function(){
    var itemNumber = $(this).attr('class').split(" ");
    itemNumber.splice( itemNumber.indexOf("item"), 1 );
    var sumElement = $(".sum_" + itemNumber);
    var sum = (sumElement.val() == "") ? 0 : parseInt(sumElement.val());
    sum += parseInt($(this).val());
    sumElement.val(sum);
});

这是一个demo计算局部总和

如果你想计算全局和(局部和的总和)这里是一个demo 2

---

如果您有多个这样的输入组，那么您必须为每个输入添加一个类，以便您知道需要考虑哪些输入元素来计算总和。

<input type="text" class="item 1" value="1" />
<input type="text" class="item 2" value="2" />
<input type="text" class="item 2" value="3" />
<input type="text" class="item 2" value="4" />
<input type="text" class="item 3" value="5" />
<input type="text" class="item 3" value="6" />
<input type="text" class="item 3" value="7" />
<br>
<br>
<input type="text" class="sum_1" value="" />
<input type="text" class="sum_2" value="" />
<input type="text" class="sum_3" value="" />



 $(document).on("change", ".item", function () {
    var sum = 0;
    var itemNumber = $(this).attr('class').split(" ");
    itemNumber.splice( itemNumber.indexOf("item"), 1 );
    $('.'+itemNumber).each(function () {
        sum += parseInt($(this).val());
    });
    $(".sum_" + itemNumber).val(sum);
});

在上面的脚本中，

1. $(this).attr('class') 看起来像“项目 1”

2. $(this).attr('class').split("") 将是一个数组 ["item", "1"]

3. 然后我将删除单词 item 并使用 "1"

这是一个demo

希望这对您有所帮助。