2012-04-09 152 views
0

我有一个问题 - 当我完成这两个领域(输入1和输入2),我试图改变其中之一,jQuery返回NaN。有人能帮助我吗?jQuery返回NaN

我试着使用parseInt函数,parseFloat但它仍然无法正常工作

对不起,我的英语:]

JS:

$(document).ready(function(){ 
    $('input[name^="input"]').keypress(function(event) { 
     if(event.which && (event.which < 48 || event.which > 57)) { 
      event.preventDefault(); 
     } 
    }); 


    var $tabs = $('input[name^="tab"]'); 
    $.each($tabs, function(i, a) { $(a).val(''); }); 

    $('input[name^="input"]').keyup(function() { 
     var count = parseInt($(this).val()); 

     if($(this).attr('name') == 'input1') { 
      var newValue = count * parseFloat($('input[name="tab1_hidden"]').val()); 
      $('input[name="tab1"]').val(newValue); 
     } 

     if($(this).attr('name') == 'input2') { 
      $.each($tabs, function(i, a) { 
       if(i > 0) { 
        var inputHidden = $(a).attr('name') + '_hidden'; 
        var newValue = count * parseFloat($('input[name="' + inputHidden + '"]').val()); 
        $(a).val(newValue); 
       } 
      }); 
     } 

    }); 
}); 

HTML:

<form action="" method="post"><div> 
<p>input 1: <input type="text" name="input1" value=""></p> 
<p> <input type="hidden" name="input1_hidden" value=""></p> 
<p>input 2: <input type="text" name="input2" value=""></p> 
<p> <input type="hidden" name="input2_hidden" value=""></p> 
<p>&nbsp;</p> 
<p>tab 1: <input type="text" name="tab1" value=""></p> 
<p><input type="hidden" name="tab1_hidden" value="10"></p> 

<p>tab 2: <input type="text" name="tab2" value=""></p> 
<p> <input type="hidden" name="tab2_hidden" value="20"></p> 

<p>tab 3: <input type="text" name="tab3" value=""></p> 
<p> <input type="hidden" name="tab3_hidden" value="30"></p> 

<p>tab 4: <input type="text" name="tab4" value=""></p> 
<p> <input type="hidden" name="tab4_hidden" value="40"></p> 

<p>tab 5: <input type="text" name="tab5" value=""></p> 
<p> <input type="hidden" name="tab5_hidden" value="50"></p> 

<p>tab 6: <input type="text" name="tab6" value=""></p> 
<p> <input type="hidden" name="tab6_hidden" value="60"></p> 

<p>tab 7: <input type="text" name="tab7" value=""></p> 
<p> <input type="hidden" name="tab7_hidden" value="70"></p> 

<p>tab 8: <input type="text" name="tab8" value=""></p> 
<p> <input type="hidden" name="tab8_hidden" value="80"></p> 
</div> 
</form> 
+2

什么是它试图解析值? (即你在输入字段中有什么) – Matt 2012-04-09 19:09:44

+0

使用一个调试器来遍历你的代码。 http://meta.stackexchange.com/a/128553/133242 – 2012-04-09 19:10:44

+0

或者至少是'console.log()'你想要增加的值,这样你就可以确定它们是否真的是你自己认为的。 – Crontab 2012-04-09 19:13:26

回答

0

更新时间:

JS:

count = 0 

$("input=[name='input1'], input=[name='input2']").change(function(){ 
    if ($(this).attr("name") == "input1") { 
     count = $("input=[name='tab1_hidden']").val(); 
     value1 = count * parseInt($(this).val()) 
     $("input[name='tab1']").val(value1);    
    } 

    if ($(this).attr("name") == "input2") { 
     value2 = $(this).val(); 
     countArray = []; 

     i = 0 

     $(".hidden").each(function() {    
      countArray[i] = $(this).val();    
      i++; 
     }); 

     $("input=[name='tab2']").val(value2 * countArray[0]); 
     $("input=[name='tab3']").val(value2 * countArray[1]); 
     $("input=[name='tab4']").val(value2 * countArray[2]); 
     $("input=[name='tab5']").val(value2 * countArray[3]); 
     $("input=[name='tab6']").val(value2 * countArray[4]); 
     $("input=[name='tab7']").val(value2 * countArray[5]); 
     $("input=[name='tab8']").val(value2 * countArray[6]); 

     } 
    });   
}); 

HTML:

<form action="" method="post"><div> 
<p>input 1: <input type="text" name="input1" value=""></p> 
<p> <input type="hidden" name="input1_hidden" value=""></p> 
<p>input 2: <input type="text" name="input2" value=""></p> 
<p> <input type="hidden" name="input2_hidden" value=""></p> 
<p>&nbsp;</p> 
<p>tab 1: <input type="text" name="tab1" value=""></p> 
<p><input type="hidden" name="tab1_hidden" value="10"></p> 

<p>tab 2: <input type="text" name="tab2" value=""></p> 
<p> <input type="hidden" class="hidden" name="tab2_hidden" value="20"></p> 

<p>tab 3: <input type="text" name="tab3" value=""></p> 
<p> <input type="hidden" class="hidden" name="tab3_hidden" value="30"></p> 

<p>tab 4: <input type="text" name="tab4" value=""></p> 
<p> <input type="hidden" class="hidden" name="tab4_hidden" value="40"></p> 

<p>tab 5: <input type="text" name="tab5" value=""></p> 
<p> <input type="hidden" class="hidden" name="tab5_hidden" value="50"></p> 

<p>tab 6: <input type="text" name="tab6" value=""></p> 
<p> <input type="hidden" class="hidden" name="tab6_hidden" value="60"></p> 

<p>tab 7: <input type="text" name="tab7" value=""></p> 
<p> <input type="hidden" class="hidden" name="tab7_hidden" value="70"></p> 

<p>tab 8: <input type="text" name="tab8" value=""></p> 
<p> <input type="hidden" class="hidden" name="tab8_hidden" value="80"></p> 
</div> 
</form> 

http://jsfiddle.net/F6Kht/4/

+0

它的作用类似,它可以工作,但是你的代码只能通过tab2乘以来自input2的值。它必须通过每个选项卡(tab1除外)的偶数 – MrShemek 2012-04-09 21:25:48

+0

您的意思是'count1 + count2 *(theValue)'? – undefined 2012-04-09 21:50:00

+0

不,我的意思是:'input1 * count1''input2 * count2''input2 * count3''input2 * count4' ... – MrShemek 2012-04-10 09:02:48

0

$('input[name="tab1_hidden"]').val()是一个空字符串;如果你parseFloat它,它是一个NaN。用NaN进行任何算术运算,它会感染所有接触的东西。

+0

好吧,所以我'parseInt'它并返回到一个字符串后,我将它作为价值,但它仍然无法工作 – MrShemek 2012-04-09 19:33:24

+0

@MrValider:对不起,我不明白这个评论。如果你解释了代码想要做什么,它可能会有所帮助;但基本上,您要检查'NaN'结果并在解析失败的情况下提供默认值。例如:'var a = parseFloat($('#a')。val()); if(isNaN(a))a = 0;' - 或者,如果你的默认值为0,你也可以写'var a = parseFloat($('#a')。val())|| 0'。 – Amadan 2012-04-09 19:40:33

+0

代码是这样做的:你在input1中键入数字,jquery将它乘以tab1_hidden的值。然后在tab1中显示结果。 当你完成input2,但juqery必须将它乘以每个选项卡(tab2,tab3 ...) – MrShemek 2012-04-09 19:50:50