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: