javascript - jQuery检测div中多个图像的图像尺寸

Question

我有这个 jQuery：

jQuery(".storyImg").each(
function(){
    if(this.width() > this.height()){
        jQuery(this).addClass("landscape");
    } else if (this.width() < this.height()){
        jQuery(this).addClass("portrait");
    } else {

    }
}
);

它似乎不起作用。我什至无法让它从函数内部发出警报。它肯定包含在 html 文件中，并且 .storyImg 类绝对正确。

Answer 1

内部each回调this是指没有widthorheight方法的 dom 元素，您需要在该元素的 jQuery 包装器中调用这些方法

jQuery(".storyImg").each(function () {
    var $this = jQuery(this)
    if ($this.width() > $this.height()) {
        $this.addClass("landscape");
    } else if ($this.width() < $this.height()) {
        $this.addClass("portrait");
    } else {

    }
});

Answer 2

你需要这样做jQuery(this).width()，jQuery(this).height()因为this它不是一个 jQuery 对象。你的控制台应该到处都是错误。你只需要调用 jQuerythis一次。

您还应该等待运行它，$(window).load()因为您想等待图像加载。

jQuery(".storyImg").each(function(){
  var $this = jQuery(this);
  if($this.width() > $this.height()){
    $this.addClass("landscape");
  } else if ($this.width() < $this.height()){
    $this.addClass("portrait");
  } else {

  }
});

Answer 3

没有 js 大师，但你不能打电话this.width()。就像你已经在那里使用jQuery(this).width()也许。最好还是将它添加到 var 中：

var $this = jQuery(this);
if($this.width() > $this.height()){
  // blah
}