如何在javascript函数中设置新的变量值？

Question

我有两个导航按钮，'a‘和'b'，其中'a’链接到页面'A‘，'B’链接到页面'b‘。当页面加载时，页面'A‘默认是可见的，页面'B’默认是隐藏的。当单击链接'b‘时，页面'A’通过切换‘jQuery’方法淡出到不透明度0并降低高度，而页面'B‘通过切换’切换‘方法淡入到不透明度1并增加高度到全尺寸。当再次单击链接'a‘时，会发生相反的情况，页面'b’再次从视图中隐藏，而页面'a‘使用相同的方法返回视图。

我遇到的问题是，当当前页面的链接再次被点击时，当前页面就会变成空白；如果页面'A‘已经加载，而我点击了链接'a'，整个页面就会变成空白，这是我不想要的。以下是我尝试过的内容：

var i = "a";

function a() {
  if (i != "a") {
    var i = "a";    
    jQuery(animation to hide page 'A');
    jQuery(animation to make visible page 'B');
  }
}

function b() {
  if (i != "b") {
    var i = "b";
    jQuery(animation to hide page 'B');
    jQuery(animation to make visible page 'B');
  }
}

我已经知道，我在函数内部为变量'i‘设置的值只在函数内部有效，而在函数外部，变量的值仍然是'a’，因此链接'a‘永远不会被点击，而链接'b’总是可以点击的，也会导致一个空白页面。

我怎样才能写出正确的javascript来做我想要做的事情呢？

Answer 1

将var关键字放入这两个函数中，它将修改全局i变量。

您的代码实际上非常容易误导，因为您将i赋值给一个function，您可能只想将其更改为使用字符串，如下所示：

var i = "a";

function a() {
  if (i != "a") {
    i = "a";    
    jQuery(animation to hide page 'A');
    jQuery(animation to make visible page 'B');
  }
}

function b() {
  if (i != "b") {
    i = "b";
    jQuery(animation to hide page 'B');
    jQuery(animation to make visible page 'B');
  }
}

Answer 2

您在函数中再次定义了一个新变量i，因为您在i之前使用了var。将它们更改为：

var i = a;

function a() {
  if (i != a) {
    i = a;    
    jQuery(animation to hide page 'A');
    jQuery(animation to make visible page 'B');
  }
}

function b() {
  if (i != b) {
    i = b;
    jQuery(animation to hide page 'B');
    jQuery(animation to make visible page 'B');
  }
}