javascript - 对全局变量不更新感到困惑

我有以下代码：

var clickCount = 1;
var slideCount = $('div.slide').length;

$('a#next-button').click(function() {
    if(clickCount < slideCount) {
        $('div.slide').animate({"left":"-=" + slideWidth}, 'slow');
        clickCount = clickCount + 1;
    }
});

$('p').text(clickCount);

它有一个名为clickCount的全局变量。

每次单击$('a#next-button').click(function() { …元素时，<a>都会以1为增量更新全局变量。

所以，我的问题是，为什么：$('p').text(clickCount);
在单击<a>标记的每个常规页面上都不会显示更新的clickCount。而是只显示1（原始分配值）。

最佳答案

该变量正在更新，但是您的函数（$('p').text(clickCount);）仅运行一次，因此仅使用它看到的值。

要解决此问题，请将$('p').text(clickCount);放在click函数中。

$('a#next-button').click(function() {
  if(clickCount < slideCount) {
     $('div.slide').animate({"left":"-=" + slideWidth}, 'slow');
     clickCount = clickCount + 1;
     $('p').text(clickCount);
  }
});