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

});

Answer 2

如果使用服务器代码获取维度并相应地设置类，则无需等待图像加载，并且只要html存在，css就会立即生效

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

2 个答案: