2

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

<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);
  }

});

我的意思是，如果我输入3or 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);
  }

});

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

4

4 回答 4

6

您不解析值和属性。

您应该知道"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"

于 2013-02-25T14:02:12.030 回答
1

清洁器：

$('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()不需要。

于 2013-02-25T14:09:09.387 回答
0

您的第二个示例是依靠 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;
于 2013-02-25T14:04:53.363 回答
-1

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

 if(parseInt(val) > 10) { ...
于 2013-02-25T14:04:28.487 回答