Mon DOM ressemble à ceci :
<div id="d1">
<div class="c1">
<a href="#"><img src="img1_on.gif"></a>
<a href="#"><img src="img2_on.gif"></a>
</div>
</div>
Lorsque quelqu'un clique sur une image, je veux que le src de l'image devienne <img src="imgx_off.gif">`` où
x` représente le numéro de l'image 1 ou 2.
Est-ce possible ou dois-je utiliser le CSS pour changer les images ?
Vous pouvez utiliser la fonction [attr()][1] de jQuery. Par exemple, si votre balise img
a un attribut id
de 'my_image', vous ferez ceci :
<img id="my_image" src="first.jpg"/>
Ensuite, vous pouvez changer le src
de votre image avec jQuery comme ceci :
$("#my_image").attr("src","second.jpg");
Pour attacher ceci à un événement click
, vous pourriez écrire :
$('#my_image').on({
'click': function(){
$('#my_image').attr('src','second.jpg');
}
});
Pour faire pivoter l'image, vous pourriez faire ceci :
$('img').on({
'click': function() {
var src = ($(this).attr('src') === 'img1_on.jpg')
? 'img2_on.jpg'
: 'img1_on.jpg';
$(this).attr('src', src);
}
});
Je vais vous montrer comment changer le src
de l'image, de sorte que lorsque vous cliquez sur une image, elle tourne à travers toutes les images qui sont dans votre HTML (dans votre id d1
et votre classe c1
spécifiquement)... que vous ayez 2 ou plus d'images dans votre HTML.
Je vous montrerai également comment nettoyer la page après que le document soit prêt, afin qu'une seule image soit affichée initialement.
Le code complet
$(function() {
var $images = $("#d1 > .c1 > a").clone();
var $length = $images.length;
var $imgShow = 0;
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") );
$("#d1 > .c1 > a").click(function(event) {
$(this).children().attr("src",
$("img", $images).eq(++$imgShow % $length).attr("src") );
event.preventDefault();
});
});
La ventilation
Créez une copie des liens contenant les images (note : vous pouvez également utiliser l'attribut href des liens pour une fonctionnalité supplémentaire... par exemple [afficher le lien de travail sous chaque image][1]) :
var $images = $("#d1 > .c1 > a").clone() ; ;
Vérifiez le nombre d'images dans le HTML et créez une variable pour savoir quelle image est affichée :
var $length = $images.length ;
var $imgShow = 0 ;
Modifiez le code HTML du document de sorte que seulement la première image soit affichée. Supprimez toutes les autres images.
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") ) ;
Liez une fonction pour gérer le clic sur le lien de l'image.
$("#d1 > .c1 > a").click(function(event) {
$(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") ) ;
event.preventDefault() ;
}) ;
Le cœur du code ci-dessus utilise ++$imgShow % $length
pour parcourir l'objet jQuery contenant les images. ++$imgShow % $length
augmente d'abord notre compteur de un, puis il module ce nombre avec le nombre d'images présentes. L'index qui en résulte va de 0
à length-1
, qui sont les index de l'objet $images
. Cela signifie que ce code fonctionnera avec 2, 3, 5, 10, ou 100 images... en parcourant chaque image dans l'ordre et en recommençant à la première image lorsque la dernière est atteinte.
De plus, [.attr()
][2] est utilisé pour obtenir et définir l'attribut "src" des images. Pour choisir des éléments parmi l'objet $images
, je définis $images
comme [contexte jQuery][3] en utilisant la forme $(selector, context)
. Ensuite, j'utilise [.eq()
][4] pour sélectionner uniquement l'élément ayant l'indice spécifique qui m'intéresse.
Vous pouvez également stocker les src
s dans un tableau.
[Exemple de jsFiddle avec 3 images][6].
Et voici comment incorporer les hrefs des balises d'ancrage autour des images :
[exemple jsFiddle][7]
[1] :
[2] : http://api.jquery.com/attr/ [3] : http://api.jquery.com/jQuery/ [4] : http://api.jquery.com/eq/ [5] : http://jsfiddle.net/YXXHy/ [6] : http://jsfiddle.net/wjapW/ [7] : http://jsfiddle.net/ZRTDS/Vous pouvez également le faire avec jQuery de cette manière :
$(".c1 img").click(function(){
$(this).attr('src','/new/image/src.jpg');
});
Vous pouvez avoir une condition s'il y a plusieurs états pour la source de l'image.