jQuery中的variable和if语句问题

Question

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

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

1.如果脚本option来自attr,它总是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 数据的自动转换功能:

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

但我个人试图避免它(特别是考虑到1.7版本中的错误),我更喜欢明确.只有那些得到完全相同的字符串,如果:它不会为你可以解析为数字的任意值的工作toString被称为上的号码(它会失败"03"或"+03"为例).