将DOM元素内容存储在变量中，并使用它更新相同的DOM元素

Question

给出以下DOM元素：

<span class=itemNumber>10</span>

我想将数字存储在变量中，将其转换为整数，向其中加1，然后在DOM中更新它。

我尝试使用此功能执行此操作，绑定到单击事件：

var itemCount = parseInt($('.itemNumber').text())+1;
$('.itemNumber').html(itemCount);

看起来很简单，但结果并不是我所期待的。它不是用“11”替换旧的“10”数字，而是显示“1011”。我尝试在.html（）之前使用.empty（）函数，但结果相同。

我怀疑变量实际上并不存储数字，而是存储元素的引用。

有什么想法吗？

Answer 1

您的代码看起来非常有效。但这是 text(func) 语法的典型用法。

$('.itemNumber').click(function() {
    $(this).text(function (_, val) {
        return +val + 1;
    });
});

<强> Demo

您的问题可能是您有多个，.itemnumber并且在处理程序中不使用$(this)可能导致两者的选择。并且$('.itemNumber').text()会同时给你们两个数字（两者都是其中的一个）说1010并且它会增加1，你得到的结果为1011而不是11。

请参阅此处的小提琴http://jsfiddle.net/a4ry4/

因此，您的修复方法是在处理程序中单独使用单击的实例来选择文本。

var itemCount = parseInt($(this).text(), 10)+1;
$(this).html(itemCount);

Answer 2

.text函数可以使用mutator函数：

$('.itemNumber').text(function(_, txt) {
    return parseInt(txt, 10) + 1;
});

Answer 3

您可能希望在将itemCount用作项目文本之前将其转换为字符串。

$('.itemNumber').text(itemCount.toString());