如果有大量文本输入,如何执行计算

时间:2012-11-07 19:55:04

标签: javascript jquery

我想对用户在问题中每个答案的文本输入中输入的数字与问题的总分数之间的差异进行计算。

我有一个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。所以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();

1 个答案:

答案 0 :(得分: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)

})​