jQuery如何进行简单的数学计算？

Question

我有一个像这样的小DIV：

<div id="counter">2</div>

我希望使用jQuery来加减1，例如从2变成3或者从2变成1...有没有一种在jQuery中实现这个功能的方法？也许可以将字符串转换为整数吗？

- AnApprentice

---

另外，如何添加一个0的下限？我不想看到负数！ :) - AnApprentice

使用Math.max(yournumber,0)确保不会出现负数。 - Adam

Answer 1

$('#counter').text(function(i, txt) {
    return +txt + 1;
});

这样，来自#counter的内容将被转换为整数。这对数字很有效，但如果出现像“foo123”这样的内容，它将变成NaN。因此，另一种解析方法是使用.parseInt()。

$('#counter').text(function(i, txt) {
    return parseInt(txt, 10) + 1;
});

parseInt()需要两个参数，一个是值，一个是基数（进制数）。如果在“foo123”上调用它，它将返回“123”。有人可能会说这是错误的行为，因此您需要决定要使用哪个变体。

示例：http://www.jsfiddle.net/Mtvju/

参考资料：.text()

- jAndy

---

+1 哇，我不知道回调是可能的。.html() 也可以吗？ - AndreKR

@generalhenry - 他正在执行+txt，这将字符串转换为数字。 - user113716

@AndreKR：是的，自jQuery 1.4.0以来，.html()和其他几种方法将文本内容解析为回调函数。 - jAndy

@generalhenry：+ 就像是一个隐式转换。如果无法将值转换为数字，它会返回 NaN，请参见示例链接。 - jAndy

Answer 2

$('#counter').text(function(i,txt) { return parseInt(txt, 10) + 1; });

加法示例：http://jsfiddle.net/2uBMy/

减法示例：http://jsfiddle.net/2uBMy/1/

要添加负数检查，您可以这样做：

$('#counter').text(function(i,txt) {
    var result = parseInt(txt, 10) - 1;
    return (result > 0) ? result : 0; 
});

- user113716

---

它以十进制解析 txt 的内容。 - Jimmy

@一位学徒 - txt 表示 #coutner 的当前文本值，而 10 确保该值被解析为十进制数。如果存在前导的 0，它将被解析为八进制数。 - user113716

有些问题，这个代码可以向上加1或向下减1，但如果计数器是3，我想要减去1，它会变成0。 - AnApprentice

@AnApprentice - 我需要看看你的代码。如果是这样，那肯定有问题。 - user113716

Answer 3

$('#counter').html(  +($('#counter').html()) + 1 );

- AndreKR

---

这会导致 "11"，来自于 "1" + 1。因为字符串与整数相加时，整数会被强制转换成字符串，然后进行连接。 - Alex Wayne

Answer 4

var counter = $('#counter');
var value   = parseInt(counter.html());
counter.html(value + 1);

- Alex Wayne

Answer 5

是的，将其转换为 int。使用 parseInt 将其转换为整数。然后使用 jQuery 的 .html 获取 <div> 的内容，并用新值替换这些内容。

$("#counter").html(parseInt($("#counter").html(),10) + 1)
$("#counter").html(parseInt($("#counter").html(),10) - 1)

在这里试试吧！

- Adam

Answer 6

JavaScript 是一种弱类型语言。你可以将包含数字的字符串和数字用于大多数目的。唯一需要小心的地方是加号（+），它既可以表示加法，也可以表示连接操作。你需要进行消歧义处理。

function subtract()
{
   count = $('#counter').html();
   if(count > 0)
   {
     count--;
   }
   $('#counter').html(count)
}

- generalhenry