Comment puis-je appliquer une fonction à plusieurs images dans jQuery?

Question

J'ai besoin d'un peu d'aide pour (probablement) quelque chose de vraiment simple.

Je souhaite utiliser un script qui convertit les images de la couleur en niveaux de gris. Je l'ai fait fonctionner partiellement - la première image devient grise, mais la seconde ne le sera pas.

Je sais que cela parce qu'un identifiant ne peut pas être utilisé plusieurs fois:

var imgObj = document.getElementById('grayimage'); 

J'ai essayé ceci:

var imgObj = $(’.grayimage’)[0]; 

Mais cela n'a pas fonctionné. Le changement à getElementByClass ne fonctionne pas non plus. (Avant que les gens demandent, j'ai changé le id en classe dans le tag <img>.)

Je pourrais vraiment utiliser de l'aide ici. Merci d'avance!

Answer 1

$('.grayimage').each(function(idx,imgObj){ 
    <do your code here> 
}); 

Answer 2

$ ('.grimimage') vous donne une liste de tous les éléments avec grayimage en tant que classe. Si vous ajoutez '[0]' vous accédez au premier élément, les modifications que vous apportez s'appliqueront uniquement à la première image trouvée avec cette classe.

Vous devez boucle à travers tous les éléments:

var images = $('.grayimage'); 
for(i = 0; i < images.length; i++) { 
    var image = images[i]; 

    // Do stuff 
}