javascript - 这段 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(方向:横向) {}/* 或纵向 */: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation

编辑

无论如何，我认为重构代码可能会让它更容易理解它在哪里中断:

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