jQuery函數僅在頁面刷新后加載

Question

設定頁面上大約有50個視頻縮略圖。

我想根據分辨率調整它們的大小。

我嘗試過的是在CSS中使用@media查詢，該查詢未按預期工作，然后我轉到了這一點。

$(document).ready(function(event) {
  var width = $(window).width();
  // Change thumbnail size if browser width changes (should be in real-time)   
  if (width <= 1300) {
    console.log(width);
    $('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
  } else {
    $('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
  }
});

插入該腳本后，視頻縮略圖的大小會發生變化，但是當我調整瀏覽器時，除非刷新頁面，否則jQuery不會加載和調整縮略圖的大小？

我不確定為什么當大小（瀏覽器）改變時jQuery無法實時加載腳本。

我在該項目中使用的語言：PHP，jQuery

Answer 1

您需要使用jQuery捕獲窗口調整大小事件，並在其中編寫代碼。

$(window).resize(function() {
    var width = $(window).width();
    // Change thumbnail size if browser width changes (should be in real-time)   
    if (width <= 1300) {
        console.log(width);
        $('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
    } else {
        $('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
    }
});

為了減少代碼重復，您可以創建一個函數並在$(window).resize()和$(document).ready()調用它

Answer 2

function onResize() {
    var width = $(window).width();
    if (width <= 1300) {
        $('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
    } else {
        $('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
    }
}

$(document).ready(onResize);

$(window).resize(onResize);

這應該工作，但它會更好 ，如果它是用CSS來完成。 如果您想發布自己嘗試過的內容，將很樂意為您提供幫助。 如果您使用css進行操作，那么在js加載和更改這些類時，將不會出現跳轉頁面的情況。

Answer 3

您可以這樣做。

注意：這是未經測試的代碼

function updateSizes(){
    var width = $(window).width();
    if (width <= 1300) {
        $('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
    } else {
        $('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
    }
}

$(document).ready(function(event) {
    updateSizes();
    // do other stuff here
});

$( window ).resize(function() {
    updateSizes();
    // do other stuff here
});