Dinamik olarak doldurulmuş değerlerin toplamı

Question

Yiyecek öğelerinin ve giysi öğelerinin toplam miktarını ayrı ayrı güncelleyen (kullanıcı her öğenin değerini girdiği için) kodum var. Toplam maliyetin gösterilmesini istiyorum (giyim + yemek girişleri toplamı). Dinamik olarak güncellenmesini istiyorum. Her bir ayrı miktar için (giyim/yemek) .keyup kullandım. Giysinin toplamı ve yiyeceklerin toplamı bir tuşa basmadan doldurulduğundan, toplam maliyeti dinamik olarak doldurmak için anahtar kullanamıyorum. Bunu yapmanın bir yolunu bulmakta zorlanıyorum.

<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

genel toplamlar işlevi ayrı yapın ve ardından sınıf girişinin her sonra diyoruz:

Aşağıda

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

benim tüm kodu: Bu Bunun belirli bir bölümü için yazdığı kodudur böyle işlevleri:

$(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); 
    }; 
}); 

Çalışma jSFiddle: https://jsfiddle.net/rdawkins/qryx2kmm/4/