Question

我试图在事件发生时增加一个数字。例如。按钮单击。在第一个事件中代码工作正常，但在以下事件中，数字“加倍”＆＃39;而且我不确定原因。

EG。 HTML：

  <div>
    <span class="userpointshead"> 130 </span>
    <button class="jquery-tester">Button</button>
  </div>

JQuery的：

$('.jquery-tester').click(function() {
  var points = parseInt($('.userpointshead').text());
  $('.userpointshead').text(points+5);
});

点击第一个按钮，.userpointshead的内容将更新为135。在第二次点击时，它们将更新为135140。在第三次点击时，它会更新为135140135145，依此类推。

我希望它从130 - 135 - 140 - 145 - 等等。

我也尝试了以下相同的结果：

$('.jquery-tester').click(function() {
  var points = parseInt($('.userpointshead').text().trim(), 10);
  var newpoints = points + 5;
  $(".userpointshead").html(newpoints);
});

我觉得我错过了一些非常明显但却不确定的东西。

更新：我使用新的<span>尝试了相同的代码，并且它可以像我一样工作。我仍然知道为什么原版不会起作用..它只是一个数字的跨度。

Answer 1

我只是尝试了这个并且工作正常。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $('.jquery-tester').click(function() {
  var points = parseInt($('.userpointshead').text());
  $('.userpointshead').text(points+5);
});
});
</script>
</head>
<body>

<div>
    <span class="userpointshead"> 130 </span>
    <button class="jquery-tester">Button</button>
  </div>

</body>
</html>

Answer 2

你的coude应该可以正常工作。也许尝试这个来检查问题是否不在其他地方：

$('.userpointshead').text(parseInt(points)+5);

Answer 3

我有或多或少地解决了它，虽然我不理解或不喜欢解决方案。

在<span>中添加一个额外的类并在新类上执行jquery让一切正常。

<span class="userpointshead user-points"> 130 </span>
<button class="jquery-tester">Button</button>


$('.jquery-tester').click(function() {
  var points = parseInt($('.user-points').text());
  $('.user-points').text(points+5);
});

我的项目中没有其他jquery / javascript干扰.userpointshead，我无法理解为什么它不起作用。

增加div

3 个答案: