2012-11-07 54 views
0

我想對用戶在問題中的每個答案的文本輸入中輸入的數字與問題的總標記之間的差異進行計算。如何在有大量文本輸入的情況下執行計算

我有一個jsfiddle應用程序,目前這樣做。當您在答案的文本輸入中更改值時,它會計算輸入的數字與屬於該問題的總標記之間的差異。

我的問題是,目前它只適用於如果我有一個或2個答案。但是一個問題可以有很多答案,他們可以有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共。因此,5(從問題1的總分數)減4 = 1(總分數現在等於1)

對於問題2,問題2的答案的文本輸入等於5,所以5(來自問題2的總分數)減5 = 0(現在總分數等於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(); 
+0

你到底希望它當用戶輸入一些數字做..提供了一個示例場景應該是幫助 –

+0

@ Sushanth- - 我已經更新了問題,以提供應該發生什麼的示例 – CMB

+0

根據您的HTML結構,看起來它會變得複雜,計算您所指的值。如果問題的所有答案都在單行中感覺..但我看到你的答案本身跨越多行 –

回答

0
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) 

})​ 
相關問題