當兩個值相等時使用jquery顯示按鈕

Question

我一直試圖將函數calculateSumc1的參數傳遞給calculateSumc2。當sum和sum1的值相等時，它應該顯示show按鈕。即使總和相同，保存按鈕也不會顯示。

<input type="button" class="btn btn-primary" id="save" style="display:none" value="Save" /> 


$(".c1").click(function() 
    { 
     $(this).keyup(function() 
     { 
      calculateSumc1(); 
     }); 
    }); 
$(".c2").click(function() 
{ 
    $(this).keyup(function() 
    { 
     calculateSumc2(); 
    }); 
}); 

function calculateSumc1() 
{ 
    var sum = 0; 
    $(".c1").each(function() 
    { 
     if (!isNaN(this.value) && this.value.length !== 0) 
     { 
      sum += parseFloat(this.value); 
     } 
    }); 
    $("#debit").html(sum); 
    //calculatetotal(sum); 
    calculateSumc2(sum); 
} 

function calculateSumc2(sum) 
{ 
    var sum1 = 0; 
    $(".c2").each(function() 
    { 
     if (!isNaN(this.value) && this.value.length !== 0) 
     { 
      sum1 += parseFloat(this.value); 
     } 
    }); 
    $("#credit").html(sum1); 
    console.log("sum1" + sum1); 
    while (sum == sum1) 
    { 
     $("#save").show(); 
    } 
} 

Answer 1

使用一個事件處理程序的所有元素，總結了一切，並在該事件處理程序比較

$('.c1, .c2').on('keyup', function() { 

    var sum1 = $.map($('.c1'), function(x) { 
     return +x.value; 
    }).reduce(function(a, b) { 
     return a + b; 
    }); 

    var sum2 = $.map($('.c2'), function(x) { 
     return +x.value; 
    }).reduce(function(a, b) { 
     return a + b; 
    }); 

    $("#debit").html(sum1); 
    $("#credit").html(sum2); 

    $("#save").toggle(sum1 === sum2); 

}); 

FIDDLE