javascript - 如果图像宽度小于X，则添加类

Question

正如标题所示，我希望有一点 jQuery - 如果图像小于定义的宽度，它会为某个元素添加一个类。对我来说，这似乎很简单，但由于某种原因它不起作用。

$(document).ready(function() {
    var image = $('.work-each img');
        if (image.width() < 500) {
            $('.work-text').addClass('work-text-small');
        }
});

如果每个 .work-each 下找到的图像小于 500 像素，则应该向元素“work-text”添加一个类“work-text-small”。

HTML 示例(针对每个)

<div class="work-each">
   <div>
      <img src=""/>
      <div class="work-text">
         <p>Title</p>
         <p>Text</p>
      </div>
   </div>
</div>
<div class="work-each">
   <div>
      <img src=""/>
      <div class="work-text">
         <p>Title</p>
         <p>Text</p>
      </div>
   </div>
</div>
<div class="work-each">
   <div>
      <img src=""/>
      <div class="work-text">
         <p>Title</p>
         <p>Text</p>
      </div>
   </div>
</div>

谢谢，

Answer 1

使用 load 代替，当 DOM 准备好时，仅定义 img 标签，但图像尚未加载。它的大小是在满载时确定的

$(window).load(function () {
    var image = $('.work-each img');
    if (image.width() < 500) {
        $('.work-text').addClass('work-text-small');
    }
});

但是，正如 @rdck 指出的，如果有更多带有 class=".work-each img" 的图像，代码将不起作用，因此在这种情况下，您需要遍历每个图像并应用该类

$(window).load(function () {
    var image = $('.work-each img');
    image.each(function () {
        var that = $(this);
        if (that.width() < 500) {
            that.next('div.work-text').addClass('work-text-small');
        }
    })

});