Jquery addClass si la hauteur de l’image est supérieure à la largeur

J’ai une question à propos de jquery addClass image.

J’essaie cette pensée dans cette DEMO de codepen.io

Le problème est que le javascript n’ajoute pas de classe à partir de l’image si la hauteur de l’image est supérieure à la largeur. Quelqu’un peut m’aider à cet égard?

Ceci est mon code jQuery de test:

$(document).ready(function() { var img = document.getElementById('.user_posted_image'); //or however you get a handle to the IMG var width = img.clientWidth; var height = img.clientHeight; if(width < height){ $('img').addClass('portrait'); } }); 

Utilisez $(".user_posted_image") au lieu de document.getElementById('.user_posted_image') . Vous essayez d’obtenir un élément avec .classSelector .

document.getElementById c’est juste pour les identifiants, mais si vous avez la bibliothèque jQuery, vous pouvez utiliser #idSelector à la place. Vous pouvez également tirer parti des méthodes jQuery.width () et jQuery.height () .

 $(document).ready(function() { var img = $('#user_posted_image');//jQuery id selector var width = img.width(); //jQuery width method var height = img.height(); //jQuery height method if(width < height){ img.addClass('portrait'); } }); 
  

Éditer (Demo CodePen) : Vous utilisez plusieurs images, vous devez utiliser la méthode .each pour faire référence à tous les éléments. Le premier code ne fonctionne que dans un élément.

 $(document).ready(function() { var imgs = $('.imgpreview');//jQuery class selector imgs.each(function(){ var img = $(this); var width = img.width(); //jQuery width method var height = img.height(); //jQuery height method if(width < height){ img.addClass('portrait'); }else{ img.addClass('landscape'); } }) }); 

En devinant que vous voulez quelque chose comme ça: http://codepen.io/BramVanroy/pen/MwrJMx

 $(document).ready(function() { var img = $('.user_posted_image'); img.each(function() { var $this = $(this), width = $this.children("img").width(), height = $this.children("img").height(); if (width < height) { $this.addClass('portrait'); } else { $this.addClass('landscape'); } }); }); 

Itérer sur tous les divs avec la classe désignée. Si la largeur de l'image à l'intérieur est inférieure à sa hauteur: ajoutez un portrait de classe. Sinon: append un paysage de classe.

REMARQUE : comme cela a été souligné dans les commentaires, vous devrez attendre le chargement des images pour pouvoir exécuter ce script avec succès. J'ai utilisé avec succès le plugin imagesLoaded dans le passé.


Y compris le plugin imagesLoaded, cela ressemblera à ceci:

 $(document).ready(function() { $(".chated-poeople").imagesLoaded(function() { var img = $('.user_posted_image'); img.each(function() { var $this = $(this), width = $this.children("img").width(), height = $this.children("img").height(); if (width < height) { $this.addClass('portrait'); } else { $this.addClass('landscape'); } }); }); }); 

N'oubliez pas d'append le plugin dans votre code HTML: