テキスト入力にキー入力された数字が正確に比較されないのはなぜですか？

Question

私のコードは、divの幅と高さを設定するようにプログラムされています。 問題は、たとえば375 x 80のように設定しないと正常に実行されます。私はしばらく時間をとって最初の数字375を見つけ出します。最初の2つの数字37をとり、 37と99は動作しません。なぜ誰かが説明できますか？

https://jsfiddle.net/1erugkgz/

<script type="text/javascript"> 
$(document).ready(function(){ 

$(".custom-form").keyup(function(e){ 

if(e.keyCode == 13) { 

var n1 = $('#n1').val(); 
var n2 = $('#n2').val(); 

    $('.rotate').width(n1); 
    $('.rotate').height(n2); 

     } 
}); 

    $('.icon').click(function() { 



var n1 = $('#n1').val(); 
var n2 = $('#n2').val(); 


if (n1 != '' && n2 != '') { 

    if (n1 > n2) { 


       if ($('.rotate').height() < $('.rotate').width()) { 
       $('.rotate').width(n2); 
       $('.rotate').height(n1); 
       } else { 
        $('.rotate').width(n1); 
       $('.rotate').height(n2); 
       } 


       } 

if (n2 > n1) { 
if ($('.rotate').height() > $('.rotate').width()) { 
       $('.rotate').width(n2); 
       $('.rotate').height(n1); 
      } else { 
       $('.rotate').width(n1); 
       $('.rotate').height(n2); 
      } 
} 
} 

}); 

}); 
</script> 

<div class="icon" style="background: grey;">ROTATE</div> 

<form class="custom-form"> 
       <input type="text" name="n1" id="n1"> x 
       <input type="text" name="n2" id="n2"> 

      </form> 

      <div class="rotate" style="background: #000;width: 100px;height: 300px;"></div> 

Answer 1

問題は、あなたがタイプのHTML input常にStringとして返します。「テキスト」、から値を取得しています。その結果、 '375'と '99'の比較では99が擬似的に大きくなることがわかります。これは、文字列であると仮定して '375'の後に来るためです。

、あなたの入力にキー入力するだけの数字を期待（もしそうなら、あなたはそのための検証を確認してください）している場合は代わりに、あなたは整数に文字列値をキャストするのparseIntを使用する必要があります。

var n1 = parseInt($('#n1').val()); 
var n2 = parseInt($('#n2').val()); 

あなたのjsFiddleを実際の実装でフォークしました： https://jsfiddle.net/Ldf6g4qh/4/