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

Store DOM element content in variable, and update the same DOM element with it

本文关键字：DOM 元素 更新 存储 变量      更新时间：2023-09-26

给定以下 DOM 元素：

<span class=itemNumber>10</span>

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

我尝试使用这个函数来做到这一点，绑定到一个点击事件：

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

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

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

有什么想法吗？

你的代码看起来完全有效。但这是文本(func(语法的典型用法。

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

演示

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

在这里看到小提琴 http://jsfiddle.net/a4ry4/

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

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

.text函数可以采用突变函数：

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

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

$('.itemNumber').text(itemCount.toString());
相关文章：