javascript - 将 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() 函数，但结果相同。

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

有任何想法吗？

score 1 · Accepted Answer

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

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

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

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

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

score 0 · Accepted Answer

该.text函数可以采用一个 mutator 函数：

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

score 0 · Accepted Answer

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

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

3 回答 3