在 if 条件下比较输入值答案

【问题标题】：Comparing an input value in an if condition在 if 条件下比较输入值
【发布时间】：2020-02-01 16:35:09
【问题描述】：

我正在尝试使用 jQuery 中的简单 if 条件启用/禁用输入按钮，但不知何故 if 正在工作，但 else if 将不起作用。我正在尝试在 0 - 40 之间启用输入按钮。当输入大于 0 的数字时按钮启用，但当我超过 40 时不会禁用。我做错了什么？

$(document).ready(function() {
  $('#btn').prop('disabled', true);
  
  $('#temp').keyup(function() {
    if ($('#temp').val() > '40') {
      $('#btn').prop('disabled', true);
    } else if ($('#temp').val() > '0') {
      $('#btn').prop('disabled', false);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="/mainpage">
  <div>
    <label>Temperatur in <strong>°C</strong>:</label>
    <input type="number" id="temp" name='temperatur'> </input>
    <input type="submit" id="btn" class="btn btn-info btn-lg" name="button" value="Weiter">
  </div>
</form>

【问题讨论】：

$("#temp").val()不起作用时的值是多少？

标签： jquery html flask

【解决方案1】：

您正在与数字字符串进行 string 比较，这可能令人惊讶。例如，"20" > "5" 为假，因为"5" 大于"2"。

我怀疑这让你措手不及。在进行比较之前转换为数字：

var value = +$("#temp").val();
// −−−−−−−−−^
if (value > 40) {
//          ^−−−−−− no quotes
   $('#btn').prop('disabled', true);
} else if (value > 0) {
// No quotes −−−−−−^
     $('#btn').prop('disabled', false);
}

有很多不同的方法可以将字符串转换为数字。在上面我使用一元+，但see my answer here 是一个完整的列表，有优缺点。

我应该注意到，当值 > 40 时禁用输入似乎很奇怪，但只有在值是 1-39 时才启用它。也许

$("#btn").prop("disabled", +$("#temp").val() > 40);

当值 > 40 时将禁用，当值

【讨论】：

我到处都能见到你，伟大的工程师！
感谢您的所有回答！ :)

【解决方案2】：

问题是因为val() 返回一个字符串，所以您比较的是字符串值，而不是整数值。因此，您依赖于可能导致奇怪行为的类型的隐式强制 - 正如您所发现的那样。

要解决此问题，请使用数值作为条件，这可以通过使用整数文字和parseFloat() 来实现。试试这个：

jQuery(function($) {
  let $btn = $('#btn').prop('disabled', true);

  $('#temp').keyup(function() {
    var value = parseFloat($(this).val()) || 0;
    $btn.prop('disabled', value <= 0 || value > 40);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="/mainpage">
  <div>
    <label>Temperatur in <strong>°C</strong>:</label>
    <input type="number" id="temp" name="temperatur" />
    <input type="submit" id="btn" class="btn btn-info btn-lg" name="button" value="Weiter" />
  </div>
</form>

【讨论】：

PS，我会在input 上使用"input" 事件（以允许粘贴等...），而且this.value 似乎比$(this).val() 更干净。

【解决方案3】：

你不应该像那样比较string 值。比较数字，如下所示。

$(document).ready(function() {
     $('#btn').prop('disabled', true);
     
     $('#temp').keyup(function() {
        var temp = parseInt($('#temp').val());
        
        if(temp > 40) {
           $('#btn').prop('disabled', true);
        } else if(temp > 0) {
          $('#btn').prop('disabled', false);
        }

   });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Temperatur in <strong>°C</strong>:</label>
<input type="number" id="temp"  name='temperatur'> </input>

<input type="submit"  id="btn" class="btn btn-info btn-lg" name = "button" value="Weiter" >

【讨论】：