Question

我有以下代码：

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（原始指定值）。

Answer 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); 
  }
});

Answer 2

每次变量更改时，您都需要更新段落的文本。该段落不会神奇地跟踪clickCount变量的值：

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

对全局变量没有更新感到困惑

2 个答案: