在窗口大小调整上向元素添加类

Question

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

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

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

Answer 1

您需要检查<{1}} 内部img 的宽度，以便在调整窗口大小后读取。您当前的代码只在加载时读取它，因此在JS中永远不会看到值的变化。试试这个：

adjustTitle()