jQuery：在元素内部添加一个数字

Question

我正在尝试使用jQuery在p元素内的数字中添加一个，但它不起作用。

$(document).ready(function() {
            function addOne() {
                var number  =   $('p').html();
                return number++;
            }

            $('p').text(addOne());
        });

Answer 1

您需要首先将数字解析为Int，否则JavaScript会将其视为字符串，而 concatinate 则将其视为。

此外，您希望函数返回数字+ 1，或至少返回++数字，否则您在返回后递增，而不是实际获得修改后的值。

试试这个：

$(document).ready(function() {
    function addOne() {
        var number  =   parseInt($('p').html());
        return number + 1;
    }
    $('p').text(addOne());
});

Answer 2

请改为尝试：

$(function(){
  $('p').html(function(i, currentHTML){
    return +currentHTML + 1;
  });
});

原始代码有两个错误：

1. HTML需要解析为整数。执行此操作的正确方法是使用parseInt(html, 10)（解析为基数为10的整数）。如果您知道HTML包含的内容，则简写方式为+html。

2. addOne函数返回number++，它应该真正返回number + 1或++number。 （后一个示例在返回之前递增number 。）

上面更正的代码在jQuery 1.4（documentation）中使用了新的.html()语法。如果您使用的是jQuery 1.3.x或更早版本，则可以使用较旧的.html()语法并修复已注明的错误：

$(function(){
  function addOne(){
    var number = +$('p').html();
    return number + 1;
  }
  $('p').html(addOne());
});

Answer 3

尝试添加parseInt：

var number = parseInt($('p').html());