Stworzył proste wejście i próbowałem ustawić wartość maksymalną za pomocą jQuery. Początkowo ustawia wartość do 77, a następnie zmniejsza wartość maksymalną do 50.

Poniższy przykład działa!

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

Teraz używając tego samego przykładu, ale zwiększa wartość maksymalną od 77 do 79.

Poniższy przykład nie działa.

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

Byłem bibliotekę jstepper.js, aby osiągnąć wynik, ale miał podobny problem. Działa dobrze, gdy zmniejszają wartość maksymalną, ale nie działa przy zwiększeniu wartości maksymalnej.

Nr ref: Biblioteka Jstepper

Aktualizacja:

Sprawdź zaktualizowany fragment.

$(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" />
1
Binny 25 luty 2019, 20:25

2 odpowiedzi

Najlepsza odpowiedź

Problemem z twoim podejściem jest to, że naprawdę nie masz dobrego sposobu na utrzymanie kontekstu, co dzieje się jako sekwencja pracujących wydarzeń biegnie. Gdybym to robił, miałbym tylko jeden Handler zdarzeń i mieć funkcję minMaxAge() Dostosuj minimalne i maksymalne wartości. Coś takiego:

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);
);

Takie podejście dodaje tylko raz "Zmień" obsługiwanie zdarzeń. Następnie kolejne połączenia z minMaxAge() aktualizują minimalne i maksymalne limity utrzymywane w jQuery .data() właściwości.

1
Pointy 26 luty 2019, 13:53

Tworzymy dwa change w każdym przykładzie. Pierwszym przykładem ma to kolejność operacji:

  • Jeśli liczba jest większa niż 77, ustaw go do 77
  • Jeśli liczba jest większa niż 50, ustaw go do 50

Drugim przykładem ma to kolejność operacji:

  • Jeśli liczba jest większa niż 77, ustaw go do 77
  • Jeśli liczba jest większa niż 79, ustaw go do 79

W drugim przykładzie numer będzie nigdy być większy niż 77 do czasu porównania go do 79.

Ustawiając maksymalnie do 77 i 79, skutecznie ustawisz go do 77. Jeśli chcesz, aby max był 79, wystarczy ustawić go do 79:

$(document).ready(function () {
  minMaxAge("#test-input",0,79);
});
1
David 25 luty 2019, 17:36