如何使用jquery执行计算

时间:2013-02-13 20:15:08

标签: javascript jquery html

我在这里有一个jsfiddle演示:http://jsfiddle.net/9b9PW/15/

我想要做的是为每个问题设置每个问题的每个答案的标记,方法是在“每个答案标记”文本输入中键入一个值。这应该做的是自动计算在文本输入中输入的值与“Marks Remaining”列下显示的值之间的差异。这样我们就知道剩下多少标记用于其他文本输入。

但我遇到的问题是,对于每个问题,它根本不执行此计算,我要问的是,为了使计算有效,我需要更改什么?

下面是一个示例,如果计算工作中输入小提琴中的标记时输出应该是什么样,下面的问题包含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”的标记。

1 个答案:

答案 0 :(得分:1)

我修复了您的代码,以便它在this Fiddle执行重新计算。它花了很长时间,因为你的Javascript格式很差。当您向StackOverflow提出问题时,请合理格式化您的代码,包括缩进。

问题是你在事件处理程序赋值和一个不正确的类选择器周围有一个奇怪的for循环。由于您可以向任何元素添加多个类,因此我在每个输入“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集合中选择的所有元素。

当您使用Jb调试器(如Firebug或Chrome的调试器)时,您还会发现这些问题更易于诊断。在你的处理程序函数中添加诸如“console.log('Keyup fired!')”之类的语句(日志记录比警报更容易,因为它不会窃取焦点并且不需要键盘或鼠标交互)。如果日志语句未触发,则表示事件处理程序未正确连接。此外,你可以这样做:

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

在调试器中检查testCollection会显示它已分配了0个元素,因此您可能已经知道您的CSS选择器无法选择任何内容。当我登录日志$(“。marksperanswer”)时,我按预期得到3个选项:

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