javascript - 在窗口大小调整中向元素添加类

根据用户的屏幕宽度，如果图像小于220像素，我希望将mobile类添加到h3。它本身可以很好地工作，但是我也希望它与窗口大小调整一起工作。因此，如果我调整浏览器窗口的大小，如果图像宽度小于220px，它将自动添加该类。我在下面编写了此代码，但我无法弄清楚出了什么问题。当我调整窗口大小时，不会添加该类。当我刷新时，将添加该类。

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

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

最佳答案

您需要检查img函数内部的adjustTitle()宽度，以便在调整窗口大小之后读取它。您当前的代码仅在加载时读取它，因此该值在您的JS中从未见过变化。尝试这个：

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

$(window).on('resize', adjustTitle);