Как заставить if / else читать глобальную переменную после изменения AJAX - PullRequest
0 голосов
/ 05 июня 2019

Я работаю с Craft CMS и использую javascript для загрузки страниц через AJAX.Я использую глобальную переменную javascript, чтобы определить, открыты или закрыты мои навигационные меню.Простой menuOpen = false или menuOpen = true.А затем, чтобы открыть или закрыть меню:

$(".header a.nav").on("touchstart click", function(e){
  e.stopPropagation();
  e.preventDefault();

  if ( menuOpen == true ){
    closeMenu();
  } else if ( menuOpen == false ) {
    openMenu();
  }
});

openMenu = function() {
  $("body").addClass("menu-open");
  $("nav.menu").removeClass("is-closed").addClass("is-open");
  $("header a.nav").addClass("x").removeClass("menu");
  menuOpen = true;
}

closeMenu = function() {
  $("body").removeClass("menu-open");
  $("header a.nav").addClass("menu").removeClass("x");
  $("nav.menu").removeClass("is-open").addClass("is-closed");
  menuOpen = false;
  setTimeout(function(){
    $("nav.menu").removeClass("is-closed");
  }, 150);
}

Когда я меняю страницы через AJAX, мне нужно закрыть меню, поэтому в моей функции успеха AJAX я запускаю closeMenu(), чтобы убедиться, что оно закрывается, когда новыйоткрывается страница.

$.ajax({
  type: 'POST',
  url: href,
  data: {},
  success: function(result){
    // Add in new content
    $main.html(result);
    // close menu
    closeMenu();
    // lots of other stuff omitted here to show you the relevant part
  }
});

Моя проблема в том, что после загрузки страницы AJAX, когда я снова открываю меню, создается впечатление, что глобальная переменная menuOpen не читается правильно, или еслизаявление как-то не получается.

Результатом является то, что функции menuOpen и menuClose, по-видимому, запускаются одновременно, даже если оператор if позволяет запускать только один или другой.Это означает, что меню не может открыться после любой загрузки страницы AJAX, потому что оно закрывается одновременно с открытием.

Что-то не так с тем, как я использую / меняю переменные, или что-то не так с моим оператором if?

Ответы [ 3 ]

0 голосов
/ 05 июня 2019

var menuOpen = false;

просто поместите это в верхней части вашего кода «var» означает, что переменная становится глобальной

0 голосов
/ 10 июня 2019

Нашел собственное решение. Обработчик событий подключался несколько раз, в результате чего функция запускалась два или более раз одновременно, если она запускалась после загрузки страницы AJAX. Добавлен $(".header a.nav").off(); перед моим $(".header a.nav").on(...);, и он работает как положено.

0 голосов
/ 05 июня 2019

Поскольку вы уже указываете состояние, добавляя и удаляя классы css в body, вы можете просто искать эти классы вместо того, чтобы загрязнять глобальное пространство переменной.

(document.body.classList.contains('menu-open') ? closeMenu : openMenu)()
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...