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 data的自动转换功能：

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

但我个人试图避免它（特别是考虑到1.7版本中的错误），我更喜欢明确。并且它对于您可以解析为数字的任何值都不起作用：只有在数字上调用toString时才会给出相同的字符串的那些值（"03"或{{1}会失败例如）。

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) { ...

jQuery中的variable和if语句问题

4 个答案: