Question

这是我的问题，我有一个动态显示图像的投资组合：

<?php echo'<div class="real"><img src='".$pathReal."'></div>' ?>

他们必须根据图片的大小调整大小。

因此，在jQuery中，我根据图像的大小分配了一个关于类的类：

$(".real img").each(function(){
  var widthImage = $(this).width();
  var heightImage = $(this).height();

  if(widthImage > heightImage ){
     $(".real img").addClass('realHeight');
  }else{
     $(".real img").addClass('realWidth');
  }
});

但它不起作用：

<img class="realHeight realWidth" src="img/1.jpg">

当我希望它是一个或另一个时，

2类被应用。

（CSS）：

.realWidth{width: 100%;}

.realHeight{height: 100%;}

有人可以帮助我吗？

（抱歉我的英语不好）

Answer 1

你的回声似乎错了：

<?php echo'<div class="real"><img src='".$pathReal."'></div>' ?>

应该是这样的：

<?php echo'<div class="real"><img src="'.$pathReal.'"></div>' ?>

您正在循环播放Ans，因此您可以使用$(this)

if(widthImage > heightImage ){
   $(this).addClass('realHeight');
}else{
   $(this).addClass('realWidth');
}

Answer 2

在循环中使用$(this)来操纵正确的DOM元素（图像标记）

使用naturalWidth和naturalHeight来获取正确的图片大小。

$(".real img").each(function(){
  var widthImage = $(this).naturalWidth;
  var heightImage = $(this).naturalHeight;

  if(widthImage > heightImage ){
     $(this).addClass('realHeight');
  }else{
     $(this).addClass('realWidth');
  }
});

Answer 3

使用它而不是在每个

中应用类选择器

$(".real img").each(function(){
  var widthImage = $(this).width();
  var heightImage = $(this).height();

  if(widthImage > heightImage ){
     $(this).addClass('realHeight');
  }else{
     $(this).addClass('realWidth');
  }
});

$（＆＃34; .real img＆＃34;）。addClass（＆＃39; realHeight＆＃39;）;

这将把realHeight类应用于所有具有类真实的图像。我们不想那样

jQuery each（）函数和大小图像的问题

3 个答案: