자바 스크립트와 총계가 다른 문제

Question

자바 스크립트 코드에 문제가 있습니다. 각 "소매점", "트리 트먼트", "신규 고객"및 "보유자"에 대해 별도의 금액을 갖기 위해 시도하고 있습니다. ".txt, .txt2 등"을 추가하는 클래스를 뒤죽박죽으로 사용할 경우에도 여전히 최상위 필드에서만 합계가됩니다.

여기 여기에 코드를

$(document).ready(function(){ 
    $(".txt, .txt2, .txt3, .txt4").each(function() { 
     $(this).keyup(function(){ 
      calculateSum(); 
     }); 
    }); 
}); 

function calculateSum() { 
    var sum = 0; 
    $(".txt, .txt2, .txt3, .txt4").each(function() { 
     if(!isNaN(this.value) && this.value.length!=0) { 
      sum += parseFloat(this.value); 
     } 
    }); 
    $("#sum").val(sum); 
} 

있어 응용 프로그램 http://jsfiddle.net/veL6K/

나는 시도하고이 이해가되지 않는 경우에 명확하게됩니다에 대한 링크입니다.

Answer 1

$(document).ready(function(){ 
    $(".txt, .txt2, .txt3, .txt4").each(function() { 
     $(this).keyup(function(){ 
      calculateSum($(this).attr("class")); // passing current class name to the function 
     }); 
    }); 
}); 

function calculateSum(cls) { 
    var sum = 0; 
    $("." + cls).each(function() { // here specifying current class name 
     if(!isNaN(this.value) && this.value.length!=0) { 
      sum += parseFloat(this.value); 
     } 
    }); 
    $("#sum" + cls.substr(3,4)).val(sum); // based on class name changing result id 
} 

JSFiddle하는

참고를 체크 아웃 : 당신은 단지 하나 개의 전류 txt 필드와 하나의 전류 sum (결과) ID를 지정하고, 내가 게시 한 것처럼해야

Answer 2

나는 것 처음부터 시작하는 것이 좋습니다. 귀하의 마크 업은 약간 지저분하고 jsfiddle은 몇 가지 오류를 보여줍니다. 나는 간단한 테이블부터 시작해서 거기서 갈 것입니다.

이 마크 업을 가지고 :

<table class="table-sum" border="1"> 
    <tr><th>A</th><th>B</th><th>C</th><th>D</th><th>Result</th></tr> 
    <tr> 
    <td><input class="qty" type="text"></td> 
    <td><input class="qty" type="text"></td> 
    <td><input class="qty" type="text"></td> 
    <td><input class="qty" type="text"></td> 
    <td><input class="result" type="text" disabled></td> 
    </tr> 
    <tr> 
    <td><input class="qty" type="text"></td> 
    <td><input class="qty" type="text"></td> 
    <td><input class="qty" type="text"></td> 
    <td><input class="qty" type="text"></td> 
    <td><input class="result" type="text" disabled></td> 
    </tr> 
</table> 

는 당신은 수량 입력에 대한 하나 개의 클래스 및 결과 입력을위한 하나 개의 클래스가 필요합니다. 그것은 클래스의 목적, 재사용 가능성입니다.

JavaScript 코드는이 논리를 처리하는 데별로 도움이되지 않습니다. 결과를 합계를 계산하고 업데이트, 우리가 현재 요소와 관련하여 필요한 요소를 찾을 수 jQuery를 사용하여 :

function calculateSum() { 
    var $cells = $(this).parent().siblings(); 
    var $inputs = $cells.find('.qty').add(this); 
    var sum = $inputs.toArray().reduce(function(a,e) { 
    return a + Number(e.value); 
    }, 0); 
    if (!isNaN(sum)) { 
    $cells.find('.result').val(sum); 
    } 
} 

$('.qty').keyup(calculateSum); 

데모 :http://jsbin.com/tatigevi/2/edit