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

Question

Given the following DOM element:

<span class=itemNumber>10</span>

I want to store the number in a variable, transform it to an integer, add 1 to it, and then update it in the DOM.

I tried to do it with this function, bound to a click event:

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

Seems simple enough, but the result is not what I'm expecting. Instead of replacing the old "10" number with "11", it displays "1011". I tried using .empty() function before the .html(), but it's the same result.

I suspect the variable is not actually storing the number, but a reference to the element.

Any ideas?

Answer 1

Your code looks perfectly valid through. But this is a typical usage of text(func) syntax.

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

Demo

Your issue could be that you have more than 1, .itemnumber and not using $(this) inthe handler could cause the selection of both. and $('.itemNumber').text() will give you both the numbers together(innertext of both of them) say 1010 and it will increment it by 1 and you get the result as 1011 instead of 11 .

See the fiddle here http://jsfiddle.net/a4ry4/

So your fix would be to use the clicked instance alone in your handler to select the text.

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

Answer 2

The .text function can take a mutator function:

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

Answer 3

您可能需要先将itemCount转换为字符串，然后再将其用作项目的文本。

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