javascript - 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() 中调用它