Question

I have code that dynamically updates the total sum of the the food items and the clothing items separately (as the user enters the value of each item). I want to have a Total cost displayed (sum of clothing + food inputs). I want it to be updated dynamically. For each separate sum (clothing/food) I used .keyup. Since the sum of the clothing and the sum of the food get filled without pressing a key, I can't use keyup to dynamically fill the total cost. I am having difficulty finding a way to do that. This is the code I wrote for that particular section:

$("#total_food, #total_clothes").on("input", function() {
   var sum = $("#total_food").val()+$("#total_clothes").val();
    $("#total_costs").val(sum);
});

Below is my entire code:

<table>
    <tr>
        <td>(1) Milk 2</td>
        <td><input type="text" class="price_food"></td>
    </tr>
    <tr>
        <td>(2) Eggs</td>
        <td><input type="text" class="price_food"></td>
    </tr>
    <tr>
        <td>Total Cost of Food</td>
        <td><input type="text" disabled="disabled" id="total_food"></td>
    </tr>
    <tr>
        <td>Shoes </td>
        <td><input type="text" class="price_clothes"></td>
    </tr>
    <tr>
        <td>Pants</td>
        <td><input type="text" class="price_clothes"></td>
    </tr>
    <tr>
        <td>Total Cost of Clothes</td>
        <td><input type="text" disabled="disabled" id="total_clothes"></td>
    </tr>
    <tr>
        <td>Total Costs</td>
        <td><input type="text" disabled="disabled" id="total_costs"></td>
    </tr>
</table>

$(document).ready(function() {
    $('.price_food').keyup(function() {
        var sum = 0;
        $('.price_food').each(function() {
            sum += Number($(this).val());
        });
        $('#total_food').val(sum);
    });

    $('.price_clothes').keyup(function() {
        var sum = 0;
        $('.price_clothes').each(function() {
            sum += Number($(this).val());
        });
        $('#total_clothes').val(sum);
    });

    $("#total_food, #total_clothes").on("input", function() {
        var sum = $("#total_food").val() + $("#total_clothes").val();
        $("#total_costs").val(sum);
    });
});

Answer 1

将总计函数分开，然后在每个类输入函数之后调用它：

$(document).ready(function() {
    $('.price_food').keyup(function() {
        var sum = 0;
        $('.price_food').each(function() {
            sum += Number($(this).val());
        });
        $('#total_food').val(sum);
        calculatetotalcosts();
    });

    $('.price_clothes').keyup(function() {
        var sum = 0;
        $('.price_clothes').each(function() {
            sum += Number($(this).val());
        });
        $('#total_clothes').val(sum);
        calculatetotalcosts();
    });

    function calculatetotalcosts (){
        var totalcost = Number($("#total_food").val()) + Number($("#total_clothes").val());
        $("#total_costs").val(totalcost);
    };
});

工作jSFiddle：https://jsfiddle.net/rdawkins/qryx2kmm/4/

Sum of dynamically filled values

1 个答案: