Question

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

以下示例有效！

   $(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。

下面的示例不起作用。

$(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

在每个示例中，您将创建两个change处理程序。第一个示例具有以下操作顺序：

如果数字大于77，则将其设置为77
如果数字大于50，则将其设置为50

第二个示例具有以下操作顺序：

如果数字大于77，则将其设置为77
如果数字大于79，则将其设置为79

在第二个示例中，当您将其与79进行比较时，该数字将从不大于77。

通过将最大值设置为77 和 79，可以有效地将其设置为77。如果要将最大值设置为79，只需将其设置为79：

$(document).ready(function () {
  minMaxAge("#test-input",0,79);
});

Answer 2

您的方法存在的问题是，您确实没有一种很好的方法来维护事件处理程序序列运行时发生的情况的上下文。如果这样做的话，我将只使用一个事件处理程序，并使用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);
);

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

输入Number Max无法动态使用Jquery

2 个答案: