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

Question

I currently have some jQuery/JavaScript code that detects the device orientation and modifies the CSS for the navbar accordingly to the device orientation. It works perfectly when you open the navbar in the device orientation but when the navbar is already open and you change the device orientation it breaks and stays the same as the previous orientation.

I've already tried a few if/else statements and a few do/while statements but could not get them how I would like it.

My 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(); }); 

I would like it to be able to detect the device orientation change and change the CSS accordingly while the navbar is open as well and not change the CSS to just that CSS for that orientation before it is opened. Thank you.

Answer 1

As I read through your code, I think most of it could be done with CSS instead of JS , using the @media (orientation: landscape) {} /* or portrait */ : https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation

EDIT

Anyways, I think restructuring the code may make it a bit easier to understand where it breaks:

 $(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

Since you don't do anything in doOrientationChange() other than add new event listeners I think you should get rid of it completely.

Instead use one listener and each time the touchstart occurs store the current orientation. Then when it closes check if orientation is the same. I used jQuery data() to store and get the previous state

It's hard to help rewrite this without seeing the markup so here's a basic high level conceptual outline using some pseudo code. Hopefully this will give you some ideas to work with that are far easier to debug as well as to DRY out the code

// 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,
  }

}