jQuery返回NaN

时间:2012-04-09 19:07:26

标签: jquery nan

我有一个问题 - 当我完成两个字段(输入1和输入2)并且我尝试更改其中一个时,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 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分: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/