2012-04-09 22 views
0

私は両方のフィールド(入力1と入力2)を完了し、それらの1つを変更しようとすると、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

+0

デバッガを使用してコードをステップ実行します。 http://meta.stackexchange.com/a/128553/133242 –

+0

あるいは、少なくとも 'console.log()'は乗算しようとしている値なので、実際にあなたが思っているものかどうかを判断できます。 – Crontab

答えて

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

これは動作しますが、あなたのコードはinput2の値にtab2だけ乗算します。タブ(タブ1を除く)のすべてを乗算する必要があります – MrShemek

+0

あなたは 'count1 + count2 *(theValue)'を意味しますか? – undefined

+0

いいえ、私は意味します: 'input1 * count1'' input2 * count2' 'input2 * count3'' input2 * count4' ... – MrShemek

0

$('input[name="tab1_hidden"]').val()は空の文字列です。もしあなたがparseFloatなら、それはNaNです。 NaNで算術演算を行い、それが触れるすべてのものに感染します。

+0

それは 'parseInt'それを'私は値として使用しますが、それでもまだ動作していない文字列に戻りますので、 – MrShemek

+0

@MrValider:申し訳ありませんが、私はこのコメントを理解していませんでした。コードが何をしようとしているのかを説明しておけば助かります。基本的には、NaNの結果をチェックし、解析が失敗した場合のデフォルトを提供したいとします。たとえば、次のようになります。 'var a = parseFloat($( '#a')。val()); if(isNaN(a))a = 0; ' - あるいはデフォルト値が0の場合、' var a = parseFloat($( '#a')。val())と書くこともできます。 0 'となる。 – Amadan

+0

コードはこれを行います。input1に数字を入力し、jqueryにtab1_hiddenの値を掛けます。結果をtab1に表示します。 input2を完了すると、juqeryは各タブ(tab2、tab3 ...)でそれを掛ける必要があります。 – MrShemek