javascript - Jquery 计数不正确？

Question

我想预订一张免费机票，规则如下:

• 一个人可以购买 1 张或多张门票，但最多 4 张
• 他可以提出最低 1 欧元的门票报价，但没有限制。因此，如果他购买 4 张票，报价至少为 4 欧元。

检查 (validate()) 发生在页面加载后以及每个 change 或 keyup 事件上。当我将购买门票从 1 增加到 2 时，一切似乎都正常，报价从 1 增加到 2，正如预期的那样。

我的问题:
当我将“ticket”(第一个输入)保留为 2 并增加报价时，它不会超过 9，在 10 时，它将输入值设置回与ticket 输入中相同的值。

另外，如果我按住向上箭头将数字增加到 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"，就像在数字比较中一样。但是如果你按住它一直到 100 它会再次重置 - 我相信你现在已经能找出原因了。)

解决方案

在尝试比较值之前，您需要将它们解析为数字。由于这些始终是整数，因此我们可以使用 parseInt 。这将确保它进行数字比较。

请参阅下面的演示以获取工作示例。

(另请注意，删除了最后一个 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">