동적 필드가있는 자바 스크립트 수학

Question

학교 수업이있는 양식이 있습니다. 이 양식에는 2 개의 필드가있는 클래스가 여러 개있을 수 있습니다. 서적 비용 및 수업료.

다른 필드의 비용을 입력 할 때 업데이트 할 총계라는 세 번째 필드가 있습니다.

이것은 내가 그것을 설정 한 방법입니다

$(document).on("keyup", ".cost", function(){ 
     theCost = parseFloat($(this).val(), 2) || 0; 
     grandTotal(theCost); 
    }); 


    // Calculate the total 
    function grandTotal(theCost){ 
     totalCost = (totalCost + theCost); 
     console.log(totalCost); 
    } 

이 내가 44 입력하면 그냥 4+4을 추가, 모든의 keyup에서 실행입니다.

필드의 값을 가져오고 각 숫자를 입력하는 대신 더 나은 방법이 있습니까?

Answer 1

이것은 인터페이스 및 작동 방법에 따라 다릅니다.

.blur 입력이 포커스를 잃을 때 발생합니다. keyup 또는 keydown을 청취하고 원하는대로하려면 [Enter] 키와 일치 시키거나 특정 단추에 바인딩 할 수 있습니다. 하나의 포괄적 인 대답은 없습니다.

주목할 가치가있는 또 다른 한 가지 - 대부분 shouldn't bind events to the document입니다. 버블 링 할 입력과 너무 멀리 떨어져 있지 않은 감각적 인 부모 요소를 찾아서 바인딩하십시오. 조금 더 좋은 예가 $('form').on('keyup', '.cost'... 일 수 있으므로 대부분의 페이지에서 이벤트가 비교적 희박한 <form>으로 제한 될 수 있습니다.

Answer 2

필드의 전체 문서를 반복하여 총 비용을 한 번에 필드를 추가하는 대신 모든 시간을 다시 계산할 것을 제안합니다. 이런 중간의 메소드는 발견 한 많은 경우 부정확 한 총계와 추가적인 빠른 타이핑 이벤트 또는 편집 결과를 초래합니다.

Answer 3

가장 쉬운 방법은 theCost을 각 클래스의 비용 배열로 만든 다음 배열을 합하여 grandTotal (간단하게 grandTotal = theCost.reduce(function(a, b) { return a + b; });이 효과가 있음)을 얻는 것입니다. 그렇게하면 항상 keyup 이벤트에서 작동합니다. 계산을 수행 할 때마다 전체 숫자가 걸리기 때문에 (대신 항상 44 등이 사용됩니다).

Answer 4

여러 번이 상황이 Update Total 버튼으로 처리되는 것을 보았으므로이 작업은 고의적입니다.

는

$('#updateTotalButton').click(function(){ 
    $('.cost').each(function() { 
     theCost = parseFloat($(this).val(), 2) || 0; 
     grandTotal(theCost); 
    }); 
}); 

// Calculate the total 
function grandTotal(theCost){ 
    totalCost = (totalCost + theCost); 
    console.log(totalCost); 
}