3

私は Web 開発が初めてで、かなり単純な JavaScript コードを適用しようとするとエラーが発生しました。2 つの数値html5フィールドがあるとします。

<label for="f1">First field</label>
            <input type="number" name="f1" id="f1" min="0" step="1" value="100"/>

<label for="f2">Second field</label>
            <input type="number" name="f2" id="f2" min="0" step="1" value="100"/>

ここで、これらのフィールドに 2 つの単純なルールを適用したいと思います。

最初のフィールドの値が変更されると、この値 (最初のフィールドから) が 2 番目のフィールドに設定されます。

$("#f1").bind("change paste keyup", function()  {
    $("#f2").val($("#f1").val());  });

これはうまくいきます。

2 番目のフィールドの値は、最初のフィールドの値を超えることはできません。

$("#f2").bind("change paste keyup", function()  {
    var f1_ = $("#f1").val();
    var f2_ = $("#f2").val();
    var f2_new = (f2_ > f1_)? f1_ : f2_;
    $("#f2").val(f2_new);  });

いくつかのバグがあります - 2 番目のフィールドの値が 10、100、1000、10000、... で、それを減らそうとすると、新しい値が最初のフィールドの値と等しくなります。 ここで例を参照してください

4

2 に答える 2

3

入力型は数値ですが、.val() から返される値の型は文字列です。Number(f1_)これを修正するには、 と を使用して数値に戻すだけNumber(f2_)です。ここにフィドルがあります。変換の前に、console.log( typeof f1_ )行がログに記録されていることを確認してくださいstring。

$("#f1").bind("change paste keyup", function() 
{
    $("#f2").val($("#f1").val()); 
});

$("#f2").bind("change paste keyup", function() 
{
    var f1_ = $("#f1").val();
    var f2_ = $("#f2").val();
    console.log( typeof f1_ );
    var f2_new = (Number(f2_) > Number(f1_))? f1_ : f2_;
    $("#f2").val(f2_new); 
});
于 2013-11-14T22:26:19.363 に答える
1

+シンボルを文字列の前に置いて数値に変換するのが好きです。次の修正を参照してください: http://jsfiddle.net/fXnFF/531/

于 2013-11-14T22:32:51.293 に答える