Как установить пользовательский шаг ввода значения? - PullRequest
0 голосов
/ 13 октября 2018

Мне нужно изменить шаг в соответствии со значением входного числа, но он не работает правильно.Если значение 20, шаг равен 2, но он дает 21, 23, 25 ... вместо 22, 24, 26 ... Почему?Как я могу решить это?

$(function() {
  $('#points').on('input change', function() {
    var element = $('#points'),
      deger = element.val(),
      adim;
    // Set rules here
    if (deger < 20) {
      adim = 1;
    } else if (deger >= 20 && deger < 50) {
      adim = 2;
    } else if (deger >= 50 && deger < 100) {
      adim = 5;
    } else if (deger >= 100 && deger < 200) {
      adim = 10;
    } else {
      adim = 50;
    }
    element.attr('step', adim);
    $('#deger').text(deger);
    $('#adim').text(adim);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>

<div>
  Value: <span id="deger"></span>
</div>
<div>
  Current step: <span id="adim"></span>
</div>
<div>
  <input id="points" type="number" step="4" value="12" min="1" max="10000" />
</div>

1 Ответ

0 голосов
/ 14 октября 2018

Видимо, проблема в атрибуте min.Поскольку у вас есть min = "1", когда вы находитесь в 20, сначала идет 21 (потому что min равен 1), а затем начинается с правильного шага.Чтобы решить, просто обновите также атрибут min.

element.attr('step', adim);
element.attr('min', adim);

С этим вы можете вернуться назад

$(function() {

     var adim;
  $('#points').on('input', function() {
    var element = $('#points'),
      deger = element.val()
    // Set rules here
    if (deger < 20) {
      adim = 1;
    } else if (deger == 20) {
      adim = adim === 2 ? 1 : 2;
    } else if (deger == 50) {
      adim = adim == 5 ? 2 : 5;
    } else if (deger == 100) {
      adim = adim == 10 ? 5 : 10;
    } else if (deger == 200) {
      adim = adim == 50 ? 10 : 50;
    }
    element.attr('step', adim);
    element.attr('min', adim);
    $('#deger').text(deger);
    $('#adim').text(adim);
  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...