我如何说“如果宽度>高度”，然后“做到这一点”与jQuery？

我有几个元素。它们在页面上的数量不断变化，请牢记这一点。我如何说“如果宽度>高度”，然后“做到这一点”与jQuery？

该元素被称为.portalimg。我需要说的是，如果width > height，将它的width设置为125px。如果height > width，将height设置为125px。

这是我有：

$('.portalimg').each(function() { 
    var pimgw = $(this).width(); 
    var pimgh = $(this).height(); 
    if (pimgw > pimgh) { 
     $(this).css('width','125px') 
    } else { 
     $(this).css('height','125px') 
    } 
});

编辑：警告成功，但不适用width & height。我哪里错了？

编辑2：更新的代码从下面清洁。这仍然只会限制高度属性，即使图像较高，然后很宽。请看：

http://jacksongariety.com/gundoglabs/

编辑3：问题是他们都返回0，如果我有一个警告说pimgw或pimgh的价值，它始终为0。

编辑4：最后得到了最好的，干净的代码可能与高速缓存，它会永远正确加载，即使它绘制的图像形成缓存：

$(function(){ 
    $('.portalimg').ready(function(){ 
     $('.portalimg').fadeTo(0,1).each(function(index) { 
      var a = $(this); 
      if (img.width() > a.height()) { 
       a.css('width','135px') 
      } else { 
       a.css('height','125px') 
      } 
     }); 
    }); 
});

来源

2012-03-06 alt

我觉得（身体PIMG）应该是（在pgbody PIMG） – Vikram 2012-03-06 05:36:14

是啊，现在它提醒成功但不限制任何内容。 – alt 2012-03-06 05:37:27

如果有类的多个元素portalimg你可以简单地使用。每次迭代：http://api.jquery.com/each/

$(function() { 
    $('.portalimg').each(function(index) { 
     var img = $(this); 
     if (img.width() > img.height()) { 
      img.css('width','125px') 
     } else { 
      img.css('height','125px') 
     } 
    }); 
}

来源

2012-03-06 05:38:41 Jesse

这个工程就会创建一个新的jQuery对象！（索引）做到了。但由于某种原因，我的第一张图片返回0。 – alt 2012-03-06 05:57:55

它在页面加载之前抓取变量！ – alt 2012-03-06 05:58:45

因此，页面加载时宽度为0。我怎样才能让它等到所有图像加载完成？ – alt 2012-03-06 05:59:00

你的循环是不对的，你应该使用

pimg = $('.portalimg').each(function() {; 
    alert("success") 
    var pimgw = $(this).width(); 
    var pimgh = $(this).height(); 
    if (pimgw > pimgh) { 
     $(this).css('width','125px') 
    } else { 
     $(this).css('height','125px') 
    } 
});

这将在文档中调用所有查找对象的类与'.portalimg'类的函数。

来源

2012-03-06 05:38:15

无论如何，这只限制高度。 – alt 2012-03-06 05:49:21

您可以尝试使用maxWidth，或者如果您的宽度具有较好的值，则可以使用Google Chrome和脚本debuger进行检查，如果未在代码中设置之前，某些时间返回0。 – 2012-03-06 05:53:21

是的，因为某种原因，pimgw总是返回0。有任何想法吗？ – alt 2012-03-06 05:55:18

 

$('.portalimg').each(function() { 
    var pimgw = $(this).width(); 
    var pimgh = $(this).height(); 
    if (pimgw > pimgh) { 
     $(this).css('width','125px') 
    } else { 
     $(this).css('height','125px') 
    } 
});

来源

2012-03-06 05:39:53

看起来像你刚刚复制从@ Jesse的回答中，并删除了'this'。 – 2012-03-06 05:44:04

不是真的，那是时机问题 – 2012-03-06 05:45:44

无论如何，我把你的upvoted。:) – 2012-03-06 05:47:27

可以试试这个。其他答案非常好。你用for和body的语法出错了。你的意思是#body还是.body？

$(".portalimg").each(function(){ 

    var pimgw = $(this).width(), 
     pimgh = $(this).height(); 

    if (pimgw > pimgh) { 
     $(this).css('width','125px') 
    }else{ 
     $(this).css('height','125px') 
    } 
});

来源

2012-03-06 05:40:44 whoblitz

我想尝试尽可能多的JavaScript，但是，这是有效的。 – alt 2012-03-06 05:43:00

另外，'body'是一个有效的HTML元素，不需要类或id。 – alt 2012-03-06 05:44:41

$('.portalimg').each(function() { var 
    img = $(this), 
    w = img.width(), 
    h = img.height(), 
    toModify = w > h ? 'width' : 'height'; 
    img.css(toModify, '125px'); 
}

来源

2012-03-06 05:46:46 tester

所以，这仍然比任何其他答案在这里btw ... – tester 2012-03-14 18:44:16

如何：

$('.portalimg').each(function() { 
    (($(this).width() > $(this).height()) 
    && ($(this).css('width','125px'))) 
    || ($(this).css('height','125px')) 
});

http://jsfiddle.net/DerekL/Qx4jF/

来源

2012-03-06 05:51:25

不起作用。看起来你打算在这里放一个if语句。 – alt 2012-03-06 05:52:42

'（（）&&（））&&（）'是一个简短的形式'if（）{} else {}' – 2012-03-06 05:52:46

啊哈，不知道！尽管如此，这并不会限制它们。但喜欢教我一些很酷的东西。 – alt 2012-03-06 05:53:25

我如何说“如果宽度>高度”，然后“做到这一点”与jQuery？

回答

相关问题