javascript - jQuery向文本添加数字

Question

我正在尝试做一些我认为非常简单的事情。将 1 的值添加到数字。

然而，数字是纯文本，事情变得有点困惑。您可能会猜到，我对此还很陌生。

我的目标是在现有分数上加 1 分，分数有一位小数，例如 1.3。 所以加点后想要的结果是2.3。但是，我编写的当前脚本返回时在小数点后第二位添加了一个点，我不明白为什么。

感谢您的帮助。

var getPoints = parseInt($('.awesome-points').text(), 10).toFixed(1);
alert(getPoints);
var addPoint = 1;
var newScore = getPoints + addPoint;
$('.awesome-points').text(newScore);

标记

Answer 1

.toFixed() 返回一个字符串(参见 MDN documentation )，这就是 getPoints + addPoint 执行字符串连接而不是加法的原因。

在执行添加后调用该方法:

// unary + converts any numerical string to a number (no matter whether float
// or int)
var getPoints = +$('.awesome-points').text();
var newScore = getPoints + 1;
$('.awesome-points').text(newScore.toFixed(1));

或者更简洁:

$('.awesome-points').text(function(i, val) {
    return (+val + 1).toFixed(1);
});

这是如何工作的:

不是将值传递给 .text()，you can pass a function .将为每个选定元素执行此函数。传递给该函数的第一个参数是所选元素集中元素的索引，第二个参数是当前文本内容。返回值将被设置为新的文本内容。
这是读取和写入文本内容的好方法，无需调用 .text() 两次。

(+val + 1).toFixed(1)的求值如下:首先val通过一元加(+val ) 然后加一 (+ 1)。 .toFixed(1) 在该操作的结果上被调用。

如果文本无法成功转换为数字，

+val 将返回 NaN。我假设这不会发生在你的情况下，但这可以很容易地用表达式处理

return ((+val || 0) + 1).toFixed(1); 

这意味着，如果 +val 的计算结果为 false(包括 NaN)，我们使用 0反而。这是 JavaScript 中的常见模式，另请参阅 What does "options = options || {}" mean in Javascript? .