使用jquery重写html数字

write over html number using jquery

本文关键字：数字 html 重写 jquery 使用      更新时间：2023-09-26

我有一行html

<p>Guess #<span id="count">0</span>!</p>

我需要编写一个函数，每次单击#guessButton时，都会将<span>标记中的数字增加1。简单的.replaceWith()方法不起作用，因为这不算在内。我想我需要一个for循环。

到目前为止，我得到了这个：

$("#guessButton").click(function() { addOne(); });

addOne()是我将用于递增的函数的名称。

在addOne()函数中，我可以使用什么javascript方法来引用html中的数字并使其响应？

创建一个变量count并将其初始化为零。然后，在每次单击时，递增它并使用.html()或.text()方法更新跨度。

var count = 0;
$("#guessButton").click(function() {
    count++;
    $('#count').html(count);
});

请确保将jquery添加到页面的末尾，或者将其包装在文档就绪处理程序中。

另一种选择是这样做：https://jsfiddle.net/c259LrpL/39/

<button id="guessButton" type="button">guessButton</button>
<p>Guess #<span id="count">0</span>!</p>

<script>
$('#guessButton').click(function() {
    $('#count').html(function(i, val) { return val*1+1 });
});
</script>

我对您的评论的简单答案是这里的

<p>Guess #<span id="count">0</span>!</p>
<input type="button" id="guessButton" value="Guess" />
$("#guessButton").click(function() {
    var curCount = parseInt($("#count").text(), 10);
    $("#count").text(curCount + 1);
});

function addOne() {
    $('#count').html(
        Number( $('#count').html() ) + 1
    );
}
相关文章：