基于图像宽度的jQuery .addClass

Question

我想做什么：

我正在制作一个跨越约 700 像素的文章布局。文章顶部是一张图片。当图像宽度小于 600 像素时，我希望图像为 float:left;，但是当图像宽度超过 600 像素时，我希望它所在的 div 加宽到完整的 700 像素，以便强制它下面的文字。 示例：我有一个 640 像素宽的图像。不幸的是，文本仍然换行，所以我得到一大块文字被推到图像的右侧......这就是为什么我希望图像所在的 div 跨越整个宽度。

我一直在尝试让我的 jQuery 工作，我尝试了 3 种不同的方法，但都没有工作。我想我错过了一些东西。它所做的只是让 div 跨度为 700 像素，而不管图像的宽度如何。

<div class="story-img">
    <img src="images/sample-article-sm.png" alt="A guy installing Solar Panels" width="350"/><br/>
    <span class="caption">Solar panels being installed on a roof.</span>
</div>

我正在使用的jQuery：

$(document).ready(function() {
var img = $(".story-img > img");
var storydiv = $(".story-img");
var width = img.width();
if (width < 300)
    storydiv.addClass("large");
});

jQuery 正在正常工作，它正在将类添加到 div“.story-img”，但不管图像宽度如何，它都会这样做。起初我以为是因为可能没有在图像中指定宽度（这将被动态加载）。为什么不抓取宽度？

Answer 1

实际上你是在图像添加到dom之前抓取宽度

所以尝试使用load 事件

$('.myImage').load(function(){
   alert($(this).width());
   alert($(this).height());
  //do something here
});