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

Question

我有2个导航按钮,'a'和'b',其中'a'链接到页面'A'和'b'链接到页面'B'.页面加载时,页面"A"默认可见,页面"B"默认隐藏.单击链接"b"时,页面"A"将淡出为不透明度0并通过jQuery"toggle"方法降低高度,而页面"B"则淡入不透明度1并通过高度增加到完整大小jQuery'toggle'方法.当再次点击链接'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给a 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之前使用了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');
  }
}