在 window 调整大小时向元素添加 class

Question

根据用户的屏幕宽度，如果图片小于220px，我想把mobile的class加到h3中。它本身工作正常，但我也希望它与 window 调整大小一起工作。因此，如果我调整浏览器 window 的大小，如果图像宽度小于 220px，它会自动添加 class。我在下面写了这段代码，但我不知道出了什么问题。当我调整 window 的大小时，class 没有被添加。但是，当我刷新时，添加了 class。

var thumbWidth = $('article.project > img').outerWidth();
function adjustTitle() {
    if (thumbWidth <= 220) {
        $('.overlay > h3').addClass('mobile');
    }
}

$(window).on('resize', function() {
    adjustTitle();
});

Answer 1

您需要检查img在函数中的宽度，以便在[=17]之后读取 =] window 已调整大小。您当前的代码仅在加载时读取它，因此该值永远不会在您的 JS 中发生变化。试试这个：

function adjustTitle() { if ($('article.project > img').outerWidth() <= 220) { $('.overlay > h3').addClass('mobile'); } } $(window).on('resize', adjustTitle);

在 window 调整大小时向元素添加 class

Adding a class to an element on window resizing

javascript

jquery

window

window-resize