如何使用JQuery選擇頁面加載時顯示的CSS類？

Question

在以下HTML標記中，我具有網站徽標的圖像版本和文本版本。 我想根據我在頁面中的垂直位置和屏幕寬度來選擇顯示哪個。

<a class="navbar-brand" id="top-logo" href="#top"><img src="display_board.png" alt="Page Title"></a>
<a class="navbar-brand scroll" id="bottom-logo" href="#top">Page Title</a>

以下腳本可以正確調整屏幕大小，並在頁面加載后滾動。 將網站加載到移動設備上時，在移動設備上查看時 ， 圖像徽標會首先顯示，然后迅速更新為文本徽標 ，因為腳本文件已加載到HTML文件的末尾。

var method_update_nav = function() {
  var buffer = 200;
  var horizontal_switch_point = 1200;
  var vertical_switch_point = $('.carousel-indicators').offset().top - buffer;
  var window_top = Math.round($(window).scrollTop());

  if ($(window).width() <= horizontal_switch_point || window_top >= vertical_switch_point) {
    $('nav').removeClass('top');
    $('nav').addClass('bottom');
    $('#top-logo').hide();
    $('#bottom-logo').show();
  } else {
    $('nav').removeClass('bottom');
    $('nav').addClass('top');
    $('#top-logo').show();
    $('#bottom-logo').hide();
  }
};

var main = function() {
  /* UPDATE NAV */
  method_update_nav();
  $(window).resize(method_update_nav);
  $(window).scroll(method_update_nav);
}

$(document).ready(main);

將腳本加載到HTML <header>會導致腳本無法運行，因為JQuery引用的類尚未在HTML標記中定義。

有沒有一種方法可以選擇正確的類以在頁面加載時顯示，但是在HTML標記中定義了類之后？

Answer 1

將腳本加載到HTML <header>會導致腳本無法運行，因為JQuery引用的類尚未在HTML標記中定義。

你自己說！

因此，您使用的是jQuery，我希望您知道必須將引用HTML元素的腳本放在頁面底部：

$(document).ready(function(){
    //script will now get the values because the HTML in now Loaded
})

我建議您閱讀網絡上的一些教程。