我如何說「如果寬度>高度」，然後「做到這一點」與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？

回答

相關問題