Jquery 增加十的幂（1000、10000、100000 等）时绑定数字输入不起作用

Question

我有两个相互绑定的数字输入，以 1000 秒递增，一个是上限，一个是下限。每当下限设置高于上限时，上限会自动更改 'value' 和 'min' 属性以匹配下限值。

但是，每次范围上限输入从增加范围下限值达到十的幂阈值（9000、90000 等）时，它就会停止，而下限范围能够继续。有谁知道这是为什么以及如何阻止这种情况发生？

HTML:

<input type="number" id="upperBidRange" step="1000" >
<input type="number" id="lowerBidRange" step="1000" min="1000" value="1000">

JS:

function SetBidIncrementAmountAndUpperBidRangeMins() {
        $('#upperBidRange').attr('min', $('#lowerBidRange').val());
    }

function SetBidIncrementAmountAndUpperBidRangeValues() {
  $('#upperBidRange').val($('#lowerBidRange').val())
}

$(SetBidIncrementAmountAndUpperBidRangeMins);
$(SetBidIncrementAmountAndUpperBidRangeValues);

$('#lowerBidRange').bind('keyup mouseup onwheel input keypress change paste', function () {
  SetBidIncrementAmountAndUpperBidRangeMins();

  if ($('#lowerBidRange').val() > $('#upperBidRange').val()) {
    $(SetBidIncrementAmountAndUpperBidRangeValues);
  }
});

Answer 1

input value 总是存储一个 String，因此 .val() 或 this.value 总是给你一个字符串。
做 if (String > String) { 不会给你想要的原因你想要数字

而是使用parseInt(value, radix)^{MDN Docs}

parseInt( $('#lowerBidRange').val() , 10 )

方法如下：

jQuery(function($) {
  // DOM is now ready and $ alias secured

  var $upper = $('#upperBidRange'),
      $lower = $('#lowerBidRange');

  function setUpperMin() {
    $upper.attr('min', $lower.val());
  }

  function setUpperVal() {
    $upper.val($lower.val());
  }

  setUpperMin();
  setUpperVal();

  $lower.on('input', function() {

    setUpperMin();

    var lowerVal = parseInt(this.value, 10),
        upperVal = parseInt($upper.val(), 10);

    if (lowerVal > upperVal) {
      setUpperVal();
    }

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" id="upperBidRange" step="1000">UPPER
<br>
<input type="number" id="lowerBidRange" step="1000" min="1000" value="1000">LOWER

一个简单的变体将使用一元 + String→Number conversion

  $lower.on('input', function() {

    setUpperMin();

    if (+this.value > +$upper.val()) {
      setUpperVal();
    }

  });

Jquery 增加十的幂（1000、10000、100000 等）时绑定数字输入不起作用

Jquery binding number inputs doesn't work when increasing powers of ten (1000, 10000, 100000, etc.)

html

javascript

jquery

events

bind