jQuery中的变量和if语句问题

Question

为什么看起来相似的代码片段以不同的方式工作？

<input data-value-max="10">

1. 如果脚本从attr 获取option，它总是将input 更新为option 值：

$('input').keyup(function(e) {

  var $this = $(this);
      option = $this.attr('data-value-max');
      val = $this.val();

  if (val > option){   // ←---
    e.preventDefault();
    $this.val(option);
  }

});

我的意思是，如果我输入 3 或 10，脚本会将输入更新为 10。

2. 第二种变体的工作方式与我预期的一样——它仅在输入值大于if 语句中的数字时才替换输入值：

$('input').keyup(function(e) {

  var $this = $(this);
      option = $this.attr('data-value-max');
      val = $this.val();

  if (val > 10){   // ←---
    e.preventDefault();
    $this.val(option);
  }

});

所以我不明白为什么第一个变体总是替换输入值？

Answer 1

您不解析值和属性。

您应该知道"3" > "10" 但3 < "10"（在后一种情况下，"10" 会自动转换以进行比较）。

使用parseInt：

var option = parseInt($this.attr('data-value-max'), 10);

由于您的属性具有data 前缀，您还可以使用jQuery data 的自动转换功能：

var option = $this.data('value-max');

但我个人尽量避免它（特别是考虑到 1.7 版本中的错误），我更喜欢明确。而且它不适用于您可以解析为数字的任何值：如果在数字上调用toString，则只有那些给出相同确切字符串的值（例如，"03" 或"+03" 将失败）。

Answer 2

清洁工：

$('input').keyup(function(e) {

    var max_value = $(this).data('value-max') * 1;

    if( this.value * 1 > max_value )
        this.value = max_value;

});

您在第一个示例中比较字符串，在第二个示例中您将字符串与整数 (10) 进行比较。您希望将字符串转换为整数以进行预期比较。一种方法是我上面使用的*1。

终于不用e.preventDefault()了。

Answer 3

您的第二个示例是依靠 JavaScript 的类型强制进行比较。

您实际上在做的是测试 "3" > 10 哪个 JS 解释器意识到您正在尝试进行数字比较并将其在内部转换为 3 > 10

如果您了解解释器将尝试和强制执行的内容，这很好......类似的例子是：

var x = 0;
if(x) { /* do stuff */ } //0 is a falsy (but not === false) value so the test will always fail

var y = "10";
console.log(y * 10) //outputs 100;

Answer 4

我怀疑您的问题根源于弱类型和类型转换。试试这个：

 if(parseInt(val) > 10) { ...