Как выполнить расчет с помощью JQuery

Question

У меня есть jsfiddle демо здесь: http://jsfiddle.net/9b9PW/15/

То, что я пытаюсь сделать, это для каждого вопроса настроить метки для каждого отдельного ответа на вопрос, введя значение в " Marks Per Answer ". Тогда это должно автоматически вычислять разницу между значением, введенным в текстовом вводе, и значением, отображаемым в столбце «Осталось символов». Это значит, что мы знаем, сколько оставшихся меток осталось использовать для других текстовых входов.

Но проблема, с которой я столкнулась, заключается в том, что она не выполняет этот расчет вообще для каждого вопроса, и то, что я прошу, - что мне нужно изменить для того, чтобы заказ работал?

Ниже приведен пример того, что вывод должен выглядеть, когда вы входите в отметках в скрипке, если расчет работал, вопрос ниже содержит 3 неправильных ответов:

Question No. Incorrect Answer Marks per Answer Total Marks  Marks Remaining 
1     B    2 (text input)  7    2 
        F    1 (text input)  
        G    2 (text input)  

суммарных значения во все текстовые входы = "5". «7» было значением по умолчанию в столбце «Осталось символов» для этого вопроса, так как «Итоговые знаки» - «7». Таким образом, 7 минус 5 равно 2, вот почему у нас осталось значение «2».

Answer 1

Я исправил ваш код так, чтобы он выполнял recalc по адресу this Fiddle. Это заняло гораздо больше времени, чем это было бы, потому что ваш Javascript был очень плохо отформатирован. Когда вы отправляете вопрос в StackOverflow, пожалуйста, введите свой код с отформатированным кодом, включая отступы.

Проблема заключалась в том, что у вас была странная петля вокруг назначения обработчика событий и неправильного селектора классов. Так как вы можете добавить несколько классов к любому элементу, я добавил класс к каждому входному «marksperanswer» и заменить свой прежний код:

//find each question set and add listeners 
for (var i=0;i<=questions;i++){          
$('input[class*="q'+i+'"]').keyup(function(){ 

С этим:

//find each question set and add listeners 
$('.marksperanswer').keyup(function() { 

обработчик событий теперь срабатывает, когда клавиша выдается на каждом входе. Это гораздо более простой и более пуленепробиваемый метод выбора элементов. Он не требует цикла for, поскольку .keyup() будет действовать на все элементы, выбранные в коллекции jQuery.

Вы также обнаружите, что такие проблемы намного легче диагностировать при использовании отладчика Javascript, такого как Firebug или отладчик Chrome. Добавьте такие инструкции, как «console.log (« Keyup fired! ») Внутри функции вашего обработчика (регистрация намного проще, чем предупреждение, поскольку она не крадет фокус и не требует взаимодействия с клавиатурой или мышью). Если оператор журнала не срабатывает, вы знаете, что обработчик событий не подключается должным образом. Кроме того, вы могли бы сделать это:

var testCollection = $('input[class*="q'+i+'"]'); 

Inspecting testCollection в отладчик показал бы это было 0 элементов, присвоенные, так что вы бы знали ваш селектор CSS не работает, чтобы выбрать что-нибудь. Когда я подключаю log $ («.mapsperanswer»), я получаю 3 выбора, как ожидалось:

Object[input.individualMarks 0, input.individualMarks 0, input.individualMarks 0] 
0 input.individualMarks 0 
1 input.individualMarks 0 
2 input.individualMarks 0 
(etc.)