时间戳

首页 > 解决方案 > Jquery 计数不正确？

javascript - Jquery 计数不正确？

问题描述

我想预订一张免费优惠的机票，这些是规则：

检查 ( 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">

标签： javascriptjqueryhtml

解决方案

原因

当您使用 获取字段的值时.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">

推荐阅读