javascript - Input Number Max 无法动态使用 Jquery

Question

创建了一个简单的输入并尝试使用 Jquery 设置最大值。最初它将值设置为 77，然后将最大值减小到 50。

The below example works !

   $(document).ready(function () {
      minMaxAge("#test-input",0,77)
      minMaxAge("#test-input",0,50)  //Text Box max is now 50 // Working
   });
   
   function minMaxAge(id,min,max) {       
        $(id).change(function() {
         if ($(this).val() > max)
         {
             $(this).val(max);
         }
         else if ($(this).val() < min)
         {
             $(this).val(min);
         }
       });
        
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test-input" type="number" />

现在使用相同的示例，但将最大值从 77 增加到 79。

The below example doesn't work.

$(document).ready(function () {
      minMaxAge("#test-input",0,77)
      minMaxAge("#test-input",0,79)  //Text Box max is now 79 // Not Working
   });
   
   function minMaxAge(id,min,max) {       
        $(id).change(function() {
         if ($(this).val() > max)
         {
             $(this).val(max);
         }
         else if ($(this).val() < min)
         {
             $(this).val(min);
         }
       });
        
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test-input" type="number" /

我是 Jstepper.Js 库来实现结果但有类似的问题。减小最大值时工作正常，但增加最大值时不起作用。

引用:Jstepper Library

更新:

请检查更新后的代码段。

$(document).ready(function() {
  $('input:radio[name="input-max"]').change(
    function() {
      if ($(this).is(':checked')) {
        var min = 0;
        var max = $(this).val();
          minMaxAge("#test-input",0,max)        
      }
    });
});

function minMaxAge(id, min, max) {
  $(id).change(function() {
    if ($(this).val() > max) {
      $(this).val(max);
    } else if ($(this).val() < min) {
      $(this).val(min);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Have two Radio button and they have set the max number to be entered in the Input. 
</p>

<input type="radio" id="input-max1" name="input-max" value=77>Max 77<br>
<input type="radio" id="input-max2" name="input-max" value=79> Max 79<br>
<input id="test-input" type="number" />

Answer 1

您的方法的问题在于，您确实没有好的方法来维护事件处理程序序列运行时所发生情况的上下文。如果我这样做，我将只有 一个 事件处理程序，并让 minMaxAge() 函数调整最小值和最大值。像这样:

function minMaxAge(id, min, max) {
  var $element = $(id);
  if (!$element.hasClass("handler-added")) {
    // need to initialize the "change" event handler
    $element.addClass("handler-added")
      .on("change", function() {
        var max = $element.data("max"), min = $element.data("min");
        if (+$element.val() > max)
          $element.val(max);
        else if (+$element.val() < min)
          $element.val(min);
      });
  }

  // update min and max
  if ($element.data("min") == null || +$element.data("min") > min)
    $element.data("min", min);
  if ($element.data("max") == null || +$element.data("max") < max)
    $element.data("max", max);
);

该方法仅添加一次“更改”事件处理程序。之后，对 minMaxAge() 的后续调用会更新保存在 jQuery .data() 属性中的最小和最大限制。