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

Question

我有2个导航按钮，“ a”和“ b”，其中“ a”链接到页面“ A”，“ b”链接到页面“ B”。 页面加载后，默认情况下页面“ A”可见，而页面“ B”默认隐藏。 单击链接'b'时，页面'A'淡出为不透明度0，并通过jQuery'toggle'方法降低高度，而页面'B'淡入为不透明度1，并通过jQuery的“切换”方法。 当再次单击链接“ 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');
  }
}