Jquery не считается правильно?

Question

Я хочу забронировать билет с бесплатным предложением, вот правила:

• Один человек может купить 1 или более билетов, но не более 4
• Он может сделать минимальное предложение 1 евро, но без ограничений, для билетов. Поэтому, если он купит 4 билета, предложение будет не менее 4 евро.

Проверка (validate()) происходит после загрузки страницы и при каждом событии change или keyup. Кажется, все в порядке, когда я увеличиваю билеты на покупку с 1 до 2, предложение увеличивается, как и ожидалось, с 1 до 2.

Моя проблема:
Когда я покидаю "Билет" ( первый вход) на 2, и я увеличиваю предложение, оно не превышает 9, на 10 оно возвращает значение входа на то же значение, которое есть на входе в билет.

Кроме того, если я удерживаю стрелку вверх, чтобы увеличить например, до 50, это нормально.

Что не так?

Мой код:

validate();

$('.input_data').on('change keyup', validate);

function validate() {
  control_tick = $("input[name='ticket']").val();
  if ((control_tick < 1) || (control_tick > 4)) {
    control_tick = 1;
    $("input[name='ticket']").val(control_tick);
  } else {
    $("input[name='ticket']").val(control_tick);
  }

  control_off = $("input[name='offer']").val();

  if (control_tick > control_off) {
    control_off = control_tick;
    $("input[name='offer']").val(control_off);
    console.log('prezzo minore di ticket');
  }
  if (control_off => control_tick) {
    $("input[name='offer']").val(control_off);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Ticket number (max 4):</label><br>
<input class="w3-input w3-center input_data" type="number" name="ticket" value="1" min="1" max="4" step="1">

<label>Offer €:</label>

<input class="w3-input w3-center input_data" type="number" name="offer" value="1" min="1" max="1000" step="1">

Answer 1

Причина

Когда вы получаете значение поля, используя .val(), это значение всегда имеет тип string. Поэтому, когда вы сравниваете значения с помощью if (control_tick > control_off) {, вы сравниваете две строки , а не два числа . А в правилах сравнения строк "2" считается «большим», чем "10", потому что он сравнивает каждый символ по одному, а не всю строку, и ясно, что «2» больше, чем « 1" .

(Что касается удержания стрелки вверх до 50, это будет нормально, потому что "50" (или, скорее, "5" больше, чем "2" при сравнении строк, так же, как при сравнении чисел c Но если вы держите его до 100, он снова будет сброшен - я уверен, что вы уже можете выяснить почему.)

Решение

Вам нужно проанализировать ваши значения как числа, прежде чем пытаться сравнивать их. Поскольку они всегда будут целыми числами, мы можем использовать parseInt . Это обеспечит вместо этого сравнение чисел c.

См. Демонстрационный пример ниже.

(Обратите внимание также, что удален последний оператор if - кроме небольшой синтаксической ошибки (=> должно быть >=, хотя это не так) Синтаксическая ошибка не может быть вызвана тем, что она действительна (но бесполезна) как выражение стрелки), она кажется избыточной, потому что вы просто заполняете поле тем же значением, которое вы получили из него мгновением ранее. else после первого if также избыточно для причина та же.)

validate();

$('.input_data').on('change keyup', validate);

function validate() {
  control_tick = parseInt($("input[name='ticket']").val());

  if ((control_tick < 1) || (control_tick > 4)) {
    control_tick = 1;
    $("input[name='ticket']").val(control_tick);
  }

  control_off = parseInt($("input[name='offer']").val());

  if (control_tick > control_off) {
    control_off = control_tick;
    $("input[name='offer']").val(control_off);
    console.log('prezzo minore di ticket');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Ticket number (max 4):</label><br>
<input class="w3-input w3-center input_data" type="number" name="ticket" value="1" min="1" max="4" step="1">

<label>Offer €:</label>

<input class="w3-input w3-center input_data" type="number" name="offer" value="1" min="1" max="1000" step="1">