将 +1 添加到只读文本输入字段的 jQuery 值

Question

我正在使用一个函数，其中有一个readonly文本 input，当我执行函数时，我希望数字值加1。假设我有60，当我执行该函数时，返回的数字应为61。

但是实际上它输出的是601，这只是将数字1添加到字符串中。你知道发生了什么吗？减法、乘法和除法都正常工作。下面是代码片段：

 var num= $("#originalnum").val() + 1;
 $("#originalnum").val(num);

是的，我尝试了几种不同的变化，我错过了什么吗？

- Dnaso

---

使用 <input type="number"> :-) - Bergi

Answer 1

在这种情况下，简单的一元加号+就足以将字符串转换为数字。

var num = +$("#originalnum").val() + 1;
$("#originalnum").val(num);

- Eric

---

使用加号运算符来表示一个变量是数字类型比使用parseInt(x,10)函数更快（当你习惯了加号运算符时）。 - VeXii

当我在一个 span 或文本输入框前使用加号时，我是在表示它不是字符串而是整数吗？ - Dnaso

不过我并没有看出什么区别，但在我用它做 PhoneGap 等事情的情况下（而且因为这可能更好的实践等等），我喜欢这个答案。 - Dnaso

Answer 2

问题在于.val()返回的是元素的值作为字符串，当你在字符串上使用+操作符时它会进行字符串连接。你需要先将值转换为数字：

问题在于.val()返回的是元素的值作为字符串，当你在字符串上使用+操作符时它会进行字符串连接。你需要先将值转换为数字：

var num = +$("#originalnum").val() + 1;            // unary plus operator
// OR
var num = Number($("#originalnum").val()) + 1;     // Number()
// OR
var num= parseFloat($("#originalnum").val()) + 1;  // parseFloat()
// OR
var num= parseInt($("#originalnum").val(),10) + 1; // parseInt()

请注意，如果您使用parseInt()函数，则必须将基数（10）作为第二个参数包括进去，否则（取决于浏览器），带前导零的字符串将被视为八进制，带前缀"0x"的字符串将被视为十六进制。另请注意，parseInt()会忽略字符串末尾的任何非数字字符，包括用户可能意图用作小数点的句点，因此parseInt("123.45aasdf", 10)返回123。同样，parseFloat()也会忽略字符串末尾的非数字字符。

此外，如果它是用户输入的值，您应该仔细检查它是否确实是一个数字，并在它不是时提供错误消息。

当您使用*、/或-运算符时，JS会尝试自动将字符串转换为数字，所以这就是为什么这些运算符“能够工作”的原因（假设字符串可以被转换）。

- nnnnnn

---

我喜欢使用Number()解决方案。它具有自我说明性。 - Phillip Senn

Answer 3

你应该使用parseInt函数，并确保该值为数字（使用isNaN函数）：

var val = $("#originalnum").val();

var num = 0;

if ( !isNaN(val) )
  num= parseInt(val) + 1;

- Kirill Ivlev

---

即使我的输入框是文本类型，我仍然可以使用它吗？ - Dnaso

你不会偶然知道为什么其他所有操作都有效，但加法不行吧？例如乘法、除法等等。 - Dnaso

如果不是数字，它将返回NaN。 - Kirill Ivlev

其他操作可能会导致JS引擎转换类型。因为+是字符串的有效运算符，所以类型不会被转换（并且字符串会被连接）。 - jahroy

@Dnaso 因为 + 对于字符串也可以表示连接。 - Kirill Ivlev

请不要忘记将“10”作为基数参数提供。 - Bergi

Answer 4

使用parseInt()函数：

var num= parseInt($("#originalnum").val(),10) + 1;

因此，您的数字被视为整数而不是字符串（因为.val()默认将结果视为字符串）。

- DarkAjax

---

请不要忘记将“10”作为基数参数提供。 - Bergi

Answer 5

如果您不喜欢上面代码的拼写方式，您也可以尝试以下方式。

$("#originalnum").val(function() {
   $(this).val(parseInt($(this).val()) + 1)
});

- Özgür Can Karagöz