计数器增量指数

Question

我每次都试图增加我的计数器，但是当点击html时，计数器会成倍增长，如+1，+ 2，+ 3，+ 4。

$('.dates').click(function(){
       $('#output').html(function(i, val) { return val*1+1 });
});

HTML：

<div id="output">0</div>

心动画代码：

var rand = Math.floor(Math.random() * 100 + 1);
    var flows = ["flowOne", "flowTwo", "flowThree"];
    var colors = ["colOne", "colTwo", "colThree", "colFour", "colFive", "colSix"];
    var timing = (Math.random() * (1.3 - 0.3) + 1.6).toFixed(1);
    // Animate Particle
    $('<div class="particle part-' + rand + ' ' + colors[Math.floor(Math.random() * 6)] + '" style="font-size:' + Math.floor(Math.random() * (30 - 22) + 22) + 'px;"><i class="fa fa-heart-o"></i><i class="fa fa-heart"></i></div>').appendTo('.particle-box').css({ animation: "" + flows[Math.floor(Math.random() * 3)] + " " + timing + "s linear" });
    $('.part-' + rand).show();
    // Remove Particle
    setTimeout(function () {
      $('.part-' + rand).remove();
    }, timing * 1000 - 100);

1. 为什么会以指数方式递增？
2. 如何每次增加1？像0,1,2,3,4

Answer 1

最有可能的是，每次点击都会注册一个新的点击事件监听器。

请检查并发布行$('.dates').click(...)周围的代码。

确保在代码中只调用此行一次，稍后不再调用。

Answer 2

可能是将它视为字符串。使用parseInt将值解析为整数，而不是使用字符串连接：

$('.dates').click(function() {
  $('#output').html(function(i, val) {
    return parseInt(val, 10) + 1;
  });
});

工作片段：

＆＃13;

＆＃13;

$('.dates').click(function() {
  $('#output').html(function(i, val) {
    return parseInt(val, 10) + 1;
  });
  return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="dates">Click</a>
<div id="output">0</div>

＆＃13;

＆＃13;

＆＃13;