php - jQuery 实时计算多行输入

Question

这是我的代码：

<?php
    for($i=1;$i<10;$i++){ 
        echo '<input type="text" class="count value'. $i .'">';
        echo '<input type="text" class="count '. $i .'value">';
        echo '<input type="text" disabled="disabled" id="result'. $i .'"><p>';
    }
        echo '<input type="text" disabled="disabled" id="total"><p>';
    ?>

和 jQuery：

$(document).ready(function(){
    $(".count").keyup(function(){
        for (var i = 0; i < 10; i++) {
            var val1 = +$(".value"+ i).val();
            var val2 = +$("."+ i +"value").val();
            $("#result" + i).val(val1*val2);
        }
   });
});

$(document).ready(function(){
    $(".count").keyup(function(){
        for (var i = 0; i < 10; i++) {
            var vala = 0;
            vala += +$("#result"+ i).val();
            }
            $("#total").val(vala);
   });
});

代码的第一部分效果很好。将两个输入相乘返回到id=result$i.

我对最后一个有问题id=total. 它应该返回所有结果X 输入的总和， 但现在只返回最后一个乘法。你知道有什么问题吗？

Answer 1

您可以通过将相关input元素组合在一起来简化代码div，使用 DOM 遍历来检索所需的值，并将两个for循环连接在一起。尝试这个：

<div class="group">
    <input type="text" class="count valueA" />
    <input type="text" class="count valueB" />
    <input type="text" class="result" disabled="disabled" />
</div>
<!-- repeat the above as needed. Note that the incremental id is no longer needed -->

<p>
    <input type="text" disabled="disabled" id="total" />
</p>

$(document).ready(function(){
    $(".count").keyup(function() {
        var total = 0;
        $('.group').each(function() {
            var $group = $(this);
            var valA = +$group.find('.valueA').val() || 0;
            var valB = +$group.find('.valueB').val() || 0;
            var result = valA + valB;
            total += result;
            $group.find('.result').val(result);
        });
        $("#total").val(total);
   });
});

示例小提琴

Answer 2

那是因为您vala在 for 循环中将变量定义为 0。应该在for循环之外：

$(".count").keyup(function(){
    var vala= 0;
    for (var i = 0; i < 10; i++) {
        vala += $("#result"+ i).val();
    }
    $("#total").val(vala);
 });