Как установить новое значение переменной внутри функции JavaScript?

Question

У меня есть 2 кнопки навигации, «a» и «b», где «a» ссылается на страницу «A» и «b» ссылается на страницу «B». Когда страница загружается, по умолчанию отображается страница «A», а по умолчанию страница «B» скрыта. При щелчке ссылки «b» страница «A» исчезает до непрозрачности 0 и уменьшается по высоте с помощью метода jQuery «toggle», а страница «B» - до непрозрачности 1 и увеличивается по высоте до полного размера с помощью jQuery метод «переключения». При повторном нажатии на ссылку «a» происходит обратное, когда страница «b» снова скрывается от просмотра, а страница «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

Вы снова определяете новую переменную i в функции, потому что вы используете var до i. Измените их следующим образом:

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

Удалите ключевое слово 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');
  }
}