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分配给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');
  }
}

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

2 个答案: