2

似たようなコードフラグメントが異なる方法で機能するのはなぜですか？

<input data-value-max="10">

1.スクリプトがoptionから取得した場合、スクリプトは常に値attrで更新inputされます。option

$('input').keyup(function(e) {

  var $this = $(this);
      option = $this.attr('data-value-max');
      val = $this.val();

  if (val > option){   // ←---
    e.preventDefault();
    $this.val(option);
  }

});

つまり、3または10を入力すると、スクリプトは入力をに更新します10。

2.if 2番目のバリアントは、期待どおりに機能します。入力値は、ステートメントの数値よりも大きい場合にのみ置き換えられます。

$('input').keyup(function(e) {

  var $this = $(this);
      option = $this.attr('data-value-max');
      val = $this.val();

  if (val > 10){   // ←---
    e.preventDefault();
    $this.val(option);
  }

});

では、なぜ最初のバリアントが常に入力値を置き換えるのか理解できませんか？

4

4 に答える 4

6

値と属性を解析しません。

あなたはそれを知っているべきです"3" > "10"が3 < "10"（後者の場合、"10"比較のために自動的に変換されます）。

parseIntを使用します：

var option = parseInt($this.attr('data-value-max'), 10);

属性にはdataプレフィックスが付いているため、jQueryデータの自動変換機能を使用することもできます。

var option = $this.data('value-max');

しかし、個人的にはそれを避けようとし（特に1.7バージョンのバグを考えると）、明示的にすることを好みます。また、数値として解析できる値に対しては機能しません。数値に対して呼び出された場合に同じ正確な文字列を与える値のみが機能します（たとえば、toString失敗し"03"ます）。"+03"

于 2013-02-25T14:02:12.030 に答える
1

クリーナー：

$('input').keyup(function(e) {

    var max_value = $(this).data('value-max') * 1;

    if( this.value * 1 > max_value )
        this.value = max_value;

});

最初の例では文字列を比較し、2 番目の例では文字列を整数 ( 10) と比較しています。予想される比較のために、文字列を整数に変換したいとします。1つの方法は、*1上記で使用したものです。

最後にe.preventDefault()必要ありません。

于 2013-02-25T14:09:09.387 に答える
0

2 番目の例は、比較のために JavaScript の型強制に依存しています。

文字通り行っていることは、"3" > 10どの JS インタープリターが数値比較を実行しようとしていることを認識し、それを内部的に次のように変換するかをテストすることです。3 > 10

これは、インタープリターが何を試みて強制するかを理解していれば問題ありません....同様の例は次のとおりです。

var x = 0;
if(x) { /* do stuff */ } //0 is a falsy (but not === false) value so the test will always fail

var y = "10";
console.log(y * 10) //outputs 100;
于 2013-02-25T14:04:53.363 に答える
-1

あなたの問題は、弱い型付けと型変換に根ざしていると思われます。これを試して：

 if(parseInt(val) > 10) { ...
于 2013-02-25T14:04:28.487 に答える