Question

我有两个数字输入相互绑定，以1000s为增量，一个是上限，一个是下限。每当较低范围设置为高于较高范围时，较高范围会自动更改“值”和“最小”属性以匹配较低范围值。

但是，每当上限输入通过增加下限值达到十个阈值（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 始终存储字符串，因此.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

一个简单的变体是使用一元+ 字符串→数字转换

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

    setUpperMin();

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

  });

当增加十（1000,10000,100000等）的幂时，Jquery绑定号输入不起作用

1 个答案: