我用這個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 */ /：https://developer.mozilla.org/en -US /文檔/網絡/ CSS / @媒體/方向

編輯

無論如何，我認為重組代碼可能使它更容易理解中斷之處：

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

}