jQuery的：根據圖像比例

我想這取決於它的比例（橫向/縱向/平方）班添加到每個圖像添加類。此代碼的工作中的jsfiddle但該網站（本地或服務器）不：

$(document).ready(function() 
{ 
    $('img').addClass('wide'); 
    $.each($('img'), function() 
    { 
     var image = $(this); 

     if (image.height() > image.width()) { 
      image.removeClass('wide'); 
      image.addClass('tall'); 
     } else if (image.height == image.width()) { 
      image.removeClass('wide'); 
      image.addClass('square'); 
     } 
    }); 
});

這裏是我的jsfiddle：http://jsfiddle.net/LYxv6/。

來源

2012-09-04 user1645438

您的網站HTML的外觀如何（張貼摘錄）。 – DrColossos

<！DOCTYPE HTML> <元的charset = UTF-8 /> JS濱 – user1645438

它與JSfiddle草稿代碼一起使用。什麼在我的HTML缺少？ – user1645438

您的代碼在jsfiddle上工作的原因是因爲該網站（默認情況下）將代碼包裝在onload處理程序中。一旦所有圖像加載完成，就會調用此處理函數，而不像$(document).ready()，它只等待DOM結構完成。

，如果你把版本的addClass，需要一個函數參數，而不是一個字符串的優勢來改變類的功能很簡單：

$(window).on('load', function() { 
    $('img').addClass(function() { 
     if (this.height === this.width) { 
      return 'square'; 
     } else if (this.height > this.width) { 
      return 'tall'; 
     } else { 
      return 'wide'; 
     } 
    }); 
});

在回調this是<img>元素本身，而你可以直接訪問其.width和.height屬性，而不必使用jQuery。

這應該比在.each()循環內反覆調用jQuery函數更有效率。

來源

2012-09-04 08:11:37 Alnitak

回答良好，我的+1。 –

工程。我可以同時使用此代碼向img parrent div添加類嗎？我嘗試注入（this）.parent（）。addClass（「squarediv」）;但那是行不通的。 – user1645438

$（this.parentNode）.addClass（'squarediv'）'_應該工作，但是你需要把它放在相關的'return'語句之前。 – Alnitak

嘗試使用ifelse if聲明變量：

Here is jsFiddle.

var biggerVal = image.height() > image.width(); 
    var equalVal = image.height() == image.width(); 

    if (biggerVal) { 
     image.removeClass('wide'); 
     image.addClass('tall'); 
    } else if (equalVal) { 
     image.removeClass('wide'); 
     image.addClass('square'); 
    }

同樣的問題在這個問題上：How to build simple sticky navigation with jQuery?

來源

2012-09-04 07:59:23

在這種情況下，沒有_much_點聲明一個只能被使用一次的變量......實際上，你應該緩存'.height（）'和'.width（）'，因爲它們都在進行函數調用。 – Alnitak

@Alnitak當我看到「*該代碼在JSfiddle中工作，但不在網站上（本地或服務器上）：*」在這個問題上，我懷疑從未聲明變量，因爲在長jQuery代碼中，這發生在我之前。工作jsFiddle，但同樣的事情不工作在網站上。 –

代碼傾向於在jsfiddle上工作的主要原因，但在其他地方不工作是因爲jsfiddle _defaults_在您的代碼中放置一個'onload'包裝，就像OP的小提琴一樣。將東西移動到變量中絕對與它無關！ – Alnitak

您應該運行此腳本

$(window).load()

...否則（準備好）可能會發生圖像尚未加載，並且在訪問它們時尺寸仍未知。

你也忘了一些括號這裏：

else if (image.height == image.width()) {

應該

else if (image.height() == image.width()) {

來源

2012-09-04 08:04:25

實際上在圖片標籤上，他會比'this.width'更好。 – Alnitak

是的，當然你是對的。 –

我仍然需要var image = $（this）;當使用this.width – user1645438

在您的本地系統上的服務器，使一個.html文件。

將其更改爲文檔加載，放在括號缺少的寬度的部分之一 - 並確保.html文件看起來像下面：

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset=utf-8 /> 
    <title></title> 
    <script> 
     $(document).load(function() { 

    $('img').addClass('wide'); 

    $.each($('img'), function() { 
     var image = $(this); 

     if (image.height() > image.width()) { 
      image.removeClass('wide'); 
      image.addClass('tall'); 
     } 
     else if (image.height() == image.width()) { 
      image.removeClass('wide'); 
      image.addClass('square'); 
     } 

    }); 

}); 
    </script> 
    <style> 
    img{ 
height:250px; 
} 
.wide{ 
border:10px solid #aed; 

} 
.tall{ 
border:10px dashed #dea; 

} 
.square{ 
border:10px dotted #ade; 

} 
    </style> 
    </head> 
    <body> 
    <img src="http://24.media.tumblr.com/tumblr_m9t0dwyu0P1qjfsubo1_500.jpg"/> 
    <img src="http://24.media.tumblr.com/tumblr_m9iqv8oQl01qcpwsso1_500.jpg "/> 
    <img src="http://25.media.tumblr.com/tumblr_m9n4kyf8aA1r1thfzo5_1280.jpg"/> 
    </body> 
    </html>

您可以用<link rel="stylesheet" type="text/css" href="yourstyle.css"/>和<script type ="text/javascript" src="jquerywhatever.js"></script><script type ="text/javascript" src="YOURSCRIPT.js"></script>更換<style></style>和<script></script>

來源

2012-09-04 08:07:41 sajawikio

在image.height更改爲$（ 'IMG'）。每丟失paranthesis（）（這是一個函數）

$(window).load(function() { 

$('img').addClass('wide'); 

$('img').each(function() { 
    var image = $(this); 

    if (image.height() > image.width()) { 
     image.removeClass('wide'); 
     image.addClass('tall'); 
    } 
    else if (image.height() == image.width()) { 
     image.removeClass('wide'); 
     image.addClass('square'); 
    } 

}); 

});

來源

2012-09-04 08:09:08 jtheman

我會做這樣的事情：

(function ($) { 
    $.fn.proportions = function (options) { 
     options = $.extend(options, { 
      wideClass : 'wide', 
      tallClass : 'tall', 
      squareClass : 'square' 
     }); 
     addProportions = function() { 
      img = $(this); 
      var ratio = img.width()/img.height(); 
      if (ratio > 1) { 
       return img.addClass(options.wideClass); 
      } 
      if (ratio === 1) { 
       return img.addClass(options.squareClass); 
      } 
      return img.addClass(options.tallClass); 
     }; 
     return this.each(function() { 
      if ($(this).width() !== undefined) { 
       addProportions.call(this); 
      } else { 
       $(this).on('load', addProportions); 
      } 
     }); 
    }; 
}(jQuery)); 

jQuery(function ($) { 
    jQuery('img').proportions(); 
});

把它在一個插件使得它可以重複使用。而不是像jsfiddle一樣使用window.load，我已經將函數附加到每個圖像的加載事件上，以便該類立即添加。

來源

2012-09-04 08:09:50

jQuery的：根據圖像比例

回答

相關問題