수많은 텍스트 입력이있는 경우 계산을 수행하는 방법

Question

질문의 각 대답에 대한 텍스트 입력에 사용자가 입력 한 숫자와 질문의 총 표시 사이의 차이를 계산하려고합니다.

나는 현재이 작업을 수행하는 jsfiddle 응용 프로그램을 보유하고 있습니다. 답변의 텍스트 입력에서 값을 변경하면 입력 한 숫자와 해당 질문에 속하는 총 점수 간의 차이를 계산합니다.

제 문제는 현재 하나 또는 두 개의 대답이있는 경우에만 작동한다는 것입니다. 그러나 질문에는 수많은 답이있을 수 있으며 3, 4, 5 개의 답과 10 개의 답을 가질 수 있습니다. 그래서 내 질문은 어떻게 아래의 바이올린은 단지 2 개의 텍스트 상자뿐만 아니라 여러 텍스트 상자에 대한 계산을 수행 할 수 있도록 변경할 수 있습니까?

http://jsfiddle.net/jTXy5/3/이 jsfiddle에는 3 개의 대답이 포함되어 있습니다. 위의 표에서 볼 수 있듯이

Question No. Question     Answer  Marks per Answer Total Marks 
1    Here are 2 answers  B   (text input) = 2  1 
             D   (text input) = 1 
             E   (text input) = 1 
2    Here is a single answer True  (text input) = 5  0 

는, 질문 1의 답변 텍스트 입력이 4 같음 :하지만 세 번째 텍스트 입력 다음은

이 발생해야하는지의 예입니다 계산되지 않습니다 전부. 따라서 질문 1에 대한 총 점수에서 4를 제외한 1 = 1 (총 점수는 이제 1과 같습니다)

질문 2의 경우 대답 2의 텍스트 입력은 5이므로 5 (질문 2의 총 표시) 빼기 = 5 (총 점수는 이제 0입니다).

$('tr').each(function() { 
    var $input = $(this).find('input'); 
    var $row = $(this); 
    var is_multiple = !$input.prop('readonly'); 
    var rowClass = is_multiple ? 'multiple' : 'single'; 
    if (is_multiple) { 
     var is_first = $row.find('td').length == 5; 
     rowClass += is_first ? ' first' : ' second'; 
    } else { 
     /* readonly just needs marks changed once on page load */ 
     $row.find('.noofmarkstd').text(5 - $input.val()); 
    } 
    $input.addClass(rowClass); 
}); 

$('input.multiple').keyup(function() { 
    var $input = $(this); 
    var is_first = $input.is('.first'); 
    var $row = $input.closest('tr'); 
    var $otherRow = $row[is_first ? 'next' : 'prev'](); 
    var $marks = is_first ? $row.find('.noofmarkstd') : $otherRow.find('.noofmarkstd'); 

    var calcs = 5 - ($input.val() || 0) - ($otherRow.find('input.multiple').val() || 0); 
    $marks.text(calcs);  
}); 

/* if need calcs for multiples generated on pageload trigger a change on the first in set*/ 
$('input.first').change(); 

Answer 1

var $inputs = $('input.individualMarks'); 

$inputs.filter(function() { 
    return $(this).prop('readonly') === true; 
}).each(function() { 
    var $input = $(this); 

    var $marks = $input.closest('tr').css('color', 'red').find('td.noofmarkstd'); 
    $marks.html(5 - ($input.val() || 0) + '<br>(single test)'); 
}); 

$inputs.filter('[data-q_group]').keyup(function() { 
    var $group = $inputs.filter('[data-q_group="' + $(this).data('q_group') + '"]'); 
    var $marks = $group.eq(0).closest('tr').find('td.noofmarkstd'); 
    var markVal = 5; 
    $group.each(function() { 
     markVal -= ($(this).val() || 0) 
    }) 
    $marks.text(markVal) 

})​