如何在 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');
  }
}