合并JavaScript变量（实际上是字符串）

Question

我有三个包含数字的

元素。

<div class="a">10</div> 
<div class="b">20</div>
<div class="c">30</div>

我使用jQuery的.html()方法获取每个元素内的数字。

var val_1 = $('.a').html(), 
    val_2 = $('.b').html(),
    val_3 = $('.c').html();

我该如何对它们求和？

以下代码并没有按照预期的工作：

var total = val_1 + val_2 + val_3;

我本以为会返回60，但实际上返回了102030。

- Programmeur Désespéré

---

你正在连接字符串。 - Mr. Polywhirl

你的变量是字符串。你需要将它们转换为整数。在JavaScript中，+既可以表示加法，也可以表示字符串连接（“加法”）。使用以下代码将字符串转换为整数：var val_1 = parseInt($('.a').html(), 10); - gen_Eric

此外，这不是jQuery的问题，而是JavaScript整体的问题。 - Mr. Polywhirl

你只会有每个元素的一个实例吗？ - David Thomas

Answer 1

首先，由于您只想获取

的内容，最好使用$('.x').text()而不是$('.x').html()。

现在发生的情况是您正在将字符串相加，即连接它们：'1' + '2' + '3soleil' === '123soleil'。

您想将它们解析为数字，可以使用：

Number(val1) + Number(val2) + Number(val3)

如果你知道它们是整数，你可以更安全地使用Number.parseInt(val, 10)（函数的第二个变量称为基数，是您的数字的数学基础。它很可能是十进制数（10），但也可能是十六进制数（16）、布尔数（2）等）。

- floribon

---

如果你要建议使用 parseInt()，请不要忘记基数。 - David Thomas

只回答喜欢使用.text()而不是.html()的人，只回答喜欢使用Number()而不是parseInt()的人。点赞！ - nirazul

Answer 2

jsFiddle演示

您可以将它们分组，使用每个进行迭代，并总计其parseInt数字。

var val = 0;
$('.a, .b, .c').each(function(){
 val += parseInt(this.innerHTML,10);
});
alert(val);

- Travis J

Answer 3

使用 parseInt，因为您的 div 内容被解析为字符串：

var val_1 = parseInt($('.a').html(),10), 
    val_2 = parseInt($('.b').html(),10),
    val_3 = parseInt($('.c').html(),10);

- MamaWalter

Answer 4

在每个变量上使用parseInt()函数；目前它将它们视为字符串并将它们连接起来。

- Kylok

Answer 5

你需要使用parseInt()将从.html()返回的字符串值解析为整数。

var val_1 = parseInt($('.a').html())

- jmiller

Answer 6

如果你不想输入（var + var），你可以尝试以下方法。

首先，你代码中的问题在于变量被解释为字符串，我们可以强制使用INT数据类型，像这样。

val_1 = parseInt($('.a').html()), 
val_2 = parseInt($('.b').html()),
val_3 = parseInt($('.c').html());

然后我们将变量聚合到一个整洁的数组中，然后执行.reduce()函数，这是一个求和函数。

var aggregate = array(val_1, val_2, val_3);
aggregate.reduce(function(a,b){return a + b})

- Jack