我用这个jQuery代码做错了什么？

Question

我目前有一些jQuery / JavaScript代码，用于检测设备方向，并根据设备方向修改导航栏的CSS。当您以设备方向打开导航栏时，它非常理想，但是当导航栏已经打开并且您更改设备方向时，它会中断并保持与以前的方向相同。

我已经尝试了一些if / else语句和一些do / while语句，但是无法让他们得到我想要的样子。

我的jQuery / JavaScript

$(document).ready(function() {
  $(".closebtn, .navbar-fullscreen-background").on('touchstart', function() {
    $('.navbar-background').css({
      'width': 90 + 'px',
      'height': 90 + 'px',
      'left': 2 + 'vw',
      'top': 30 + 'px',
    });
    $('.fadein-test, .fadein-test2, .fadein-test3, .fadein-test4').hide();
    setTimeout(function() {
      $('.mobile-navbar-button, .bar-1, .bar-2').fadeIn(200);
    }, 300);
    $('.navbar-fullscreen-background').fadeOut(300);
    $('.closebtn').css('display', 'none');
  });
  $('.fadein-test, .closebtn').hide();

  function doOnOrientationChange() {
    switch (window.orientation) {
      case 90:
        $(".mobile-navbar-button").on('touchstart', function() {
          $('.navbar-background').css({
            'width': 1450 + 'px',
            'height': 1200 + 'px',
            'left': -400 + 'px',
            'top': -750 + 'px',
          });
          $('.navbar-fullscreen-background').fadeIn(300).css('display', 'block');
          $('.mobile-navbar-button, .bar-1, .bar-2').css('display', 'none');
          $('.fadein-test').show().addClass('fadein-animationtest');
          $('.fadein-test2').show().addClass('fadein-animationtest2');
          $('.fadein-test3').show().addClass('fadein-animationtest3');
          $('.fadein-test4').show().addClass('fadein-animationtest4');
          setTimeout(function() {
            $('.closebtn').fadeIn(200);
          }, 300);
        });
        break;
      case -90:
        $(".mobile-navbar-button").on('touchstart', function() {
          $('.navbar-background').css({
            'width': 1450 + 'px',
            'height': 1200 + 'px',
            'left': -400 + 'px',
            'top': -750 + 'px',
          });
          $('.navbar-fullscreen-background').fadeIn(300).css('display', 'block');
          $('.mobile-navbar-button, .bar-1, .bar-2').css('display', 'none');
          $('.fadein-test').show().addClass('fadein-animationtest');
          $('.fadein-test2').show().addClass('fadein-animationtest2');
          $('.fadein-test3').show().addClass('fadein-animationtest3');
          $('.fadein-test4').show().addClass('fadein-animationtest4');
          setTimeout(function() {
            $('.closebtn').fadeIn(200);
          }, 300);
        });
        break;
      case 0:
        $(".mobile-navbar-button").on('touchstart', function() {
          $('.navbar-background').css({
            'width': 1450 + 'px',
            'height': 1200 + 'px',
            'left': -400 + 'px',
            'top': -400 + 'px',
          });
          $('.navbar-fullscreen-background').fadeIn(300).css('display', 'block');
          $('.mobile-navbar-button, .bar-1, .bar-2').css('display', 'none');
          $('.fadein-test').show().addClass('fadein-animationtest');
          $('.fadein-test2').show().addClass('fadein-animationtest2');
          $('.fadein-test3').show().addClass('fadein-animationtest3');
          $('.fadein-test4').show().addClass('fadein-animationtest4');
          setTimeout(function() {
            $('.closebtn').fadeIn(200);
          }, 300);
        });
        break;
      case 180:
        $(".mobile-navbar-button").on('touchstart', function() {
          $('.navbar-background').css({
            'width': 1450 + 'px',
            'height': 1200 + 'px',
            'left': -400 + 'px',
            'top': -400 + 'px',
          });
          $('.navbar-fullscreen-background').fadeIn(300).css('display', 'block');
          $('.mobile-navbar-button, .bar-1, .bar-2').css('display', 'none');
          $('.fadein-test').show().addClass('fadein-animationtest');
          $('.fadein-test2').show().addClass('fadein-animationtest2');
          $('.fadein-test3').show().addClass('fadein-animationtest3');
          $('.fadein-test4').show().addClass('fadein-animationtest4');
          setTimeout(function() {
            $('.closebtn').fadeIn(200);
          }, 300);
        });
        break;
      default:
        break;
    }
  }

  window.addEventListener('orientationchange', doOnOrientationChange);

  // Initial execution if needed
  doOnOrientationChange();
});

我希望它能够检测设备方向的变化并在打开导航栏的同时相应地更改CSS，并且在打开之前不要将CSS更改为该方向的CSS。谢谢。

Answer 1

在阅读您的代码时，我认为其中大部分可以使用 CSS 而不是 JS 来完成，使用@media (orientation: landscape) {} /* or portrait */：{{3} }

编辑

无论如何，我认为重组代码可能使它更容易理解中断的地方：

$(document).ready(function() {

  // starting background
  var bgNavInitObj = {
    'width': 90 + 'px',
    'height': 90 + 'px',
    'left': 2 + 'vw',
    'top': 30 + 'px',
  };

  // 90 and -90 positions
  var bgNav90 = {
    'width': 1450 + 'px',
    'height': 1200 + 'px',
    'left': -400 + 'px',
    'top': -750 + 'px',
  };

  // 0 and 180 positions
  var bgNav0 = {
    'width': 1450 + 'px',
    'height': 1200 + 'px',
    'left': -400 + 'px',
    'top': -400 + 'px',
  };

  // setting transitions
  function setTransitions() {
    $('.navbar-fullscreen-background').fadeIn(300).css('display', 'block');
    $('.mobile-navbar-button, .bar-1, .bar-2').css('display', 'none');
    $('.fadein-test').show().addClass('fadein-animationtest');
    $('.fadein-test2').show().addClass('fadein-animationtest2');
    $('.fadein-test3').show().addClass('fadein-animationtest3');
    $('.fadein-test4').show().addClass('fadein-animationtest4');
    setTimeout(function() {
      $('.closebtn').fadeIn(200);
    }, 300);
  }

  function changeBg() {
    switch (window.orientation) {
      case 90:
        $(".mobile-navbar-button").on('touchstart', function() {
          $('.navbar-background').css(bgNav90);
        });
        break;
      case -90:
        $(".mobile-navbar-button").on('touchstart', function() {
          $('.navbar-background').css(bgNav90);
        });
        break;
      case 0:
        $(".mobile-navbar-button").on('touchstart', function() {
          $('.navbar-background').css(bgNav0);
        });
        break;
      case 180:
        $(".mobile-navbar-button").on('touchstart', function() {
          $('.navbar-background').css(bgNav0);
        });
        break;
      default:
        break;
    }

    // this function is always executed
    setTransitions();
  }

  $(".closebtn, .navbar-fullscreen-background").on('touchstart', function() {
    $('.navbar-background').css(bgNavInitObj);
    $('.fadein-test, .fadein-test2, .fadein-test3, .fadein-test4').hide();
    setTimeout(function() {
      $('.mobile-navbar-button, .bar-1, .bar-2').fadeIn(200);
    }, 300);
    $('.navbar-fullscreen-background').fadeOut(300);
    $('.closebtn').css('display', 'none');
  });
  $('.fadein-test, .closebtn').hide();

  // this is your touchstart function
  // with the changeBg() it uses the needed functions depending on
  // window.orientation
  $(".mobile-navbar-button").on('touchstart', function() {
    changeBg();
  });

  // this may be a code smell, but I supposed that you may want to
  // do other things on orientation change
  function doOnOrientationChange() {
    changeBg();
  }

  window.addEventListener('orientationchange', doOnOrientationChange);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

由于除了添加新的事件侦听器之外，您在doOrientationChange()中没有执行任何其他操作，所以我认为您应该完全摆脱它。

请使用一个侦听器，并且每次触摸开始时都将存储当前方向。然后在关闭时检查方向是否相同。我使用jQuery data（）来存储并获取以前的状态

很难在没有看到标记的情况下重写它，因此这是使用一些伪代码的基本高级概念大纲。希望这会给您一些想法，使它们更容易调试和干燥代码

// cache references to elements in variables for code simplification 
// and not needing to search dom each time and much easier to write 
// variables than long selectors repeatedly

var $nav_parent = $(selector??)
  .data('navState', { open: false, orient: window.orientation}),
  // store state on parent or button?
  $nav_bg = $('.navbar-background'),
  $nav_btn = $(".mobile-navbar-button");

$nav_bg.on('touchstart', function(evt) {
  var prevState = getNavState(),
    prevOrient = prevState.orient,
    currOrient = window.orientation;

  setNavState(currOrient, false)
  $nav_bg.css(getNavBgCss(currOrient, prevOrient, false));

});

$nav_btn.on('touchstart', function(evt) {
  var prevState = getNavState(),
    prevOrient = prevState.orient,
    currOrient = window.orientation;    

  // store state when it opens
  setNavState(currOrient, true);

  $nav_bg.css(getNavBgCss(currOrient, prevOrient, true));

});

// helper functions
function getNavState() {
  // want to store somehwere else? easier to change in one helper function than numerous places
  return $nav_parent.data('navState')
}

function setNavState(orient, isOpen) {
  var currState = {
    orient: orient,
    open: isOpen
  };
  $nav_parent.data('navState', currState)

}
// this ones a bit ugly...but gives ideas on how to manage various conditions
function getNavBgCss(orient, prevOrient, isOpen) {
  // now have access to all possible conditions
  var isSame = orient === prevOrient,
    is90 = Math.abs(orient) === 90;

  // adjust based on orientation differences , not real logic, only conceptual

  return {
    'width': 1450, // no need for 'px' prefix
    'height': 1200,
    'left': is90 ? isSame ? -700 : -200 : isSame ? -200 : 700, // 
    'top': -750,
  }

}