如果图像宽度小于X,则添加类

Question

正如标题所暗示的那样,我希望得到一些jQuery - 如果图像小于定义的宽度,它会为某个元素添加一个类.对我来说,这似乎很容易,但由于某种原因它不起作用.

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

如果在每个.work-each下找到的图像小于500px,则应该在元素'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>

谢谢,R

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');
        }
    })

});