Il mio DOM è così:
<div id="d1">
<div class="c1">
<a href="#"><img src="img1_on.gif"></a>
<a href="#"><img src="img2_on.gif"></a>
</div>
</div>
Quando qualcuno clicca su un'immagine, voglio che la src dell'immagine cambi in <img src="imgx_off.gif">
dove x
rappresenta l'immagine numero 1 o 2.
È possibile o devo usare i CSS per cambiare le immagini?
Puoi usare la funzione attr() di jQuery. Per esempio, se il tuo tag img
ha un attributo id
di 'my_image', dovresti fare questo:
<img id="my_image" src="first.jpg"/>
Poi puoi cambiare il src
della tua immagine con jQuery in questo modo:
$("#my_image").attr("src","second.jpg");
Per attaccare questo ad un evento click
, potresti scrivere:
$('#my_image').on({
'click': function(){
$('#my_image').attr('src','second.jpg');
}
});
Per ruotare l'immagine, potresti fare così:
$('img').on({
'click': function() {
var src = ($(this).attr('src') === 'img1_on.jpg')
? 'img2_on.jpg'
: 'img1_on.jpg';
$(this).attr('src', src);
}
});
Ti mostrerò come cambiare l'immagine src
, in modo che quando clicchi su un'immagine ruota attraverso tutte le immagini che sono nel tuo HTML (nel tuo id d1
e nella classe c1
in particolare)... se hai 2 o più immagini nel tuo HTML.
Ti mostrerò anche come pulire la pagina dopo che il documento è pronto, in modo che inizialmente venga visualizzata una sola immagine.
Il codice completo
$(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 ripartizione.
Creare una copia dei link che contengono le immagini (nota: si potrebbe anche fare uso dell'attributo href dei link per una maggiore funzionalità... per esempio [visualizzare il link funzionante sotto ogni immagine][1]):
var $immagini = $("#d1 > .c1 > a").clone(); ;
Controllate quante immagini erano presenti nell'HTML e create una variabile per tracciare quale immagine viene mostrata:
var $length = $images.length;
var $imgShow = 0;
Modificate l'HTML del documento in modo che venga mostrata solo la prima immagine. Cancella tutte le altre immagini.
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") );
Legare una funzione per gestire quando il link dell'immagine viene cliccato.
$("#d1 > .c1 > a").click(function(event) {
$(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
event.preventDefault();
});
Il cuore del codice di cui sopra sta usando ++$imgShow % $length
per scorrere l'oggetto jQuery contenente le immagini. ++$imgShow % $length
prima aumenta il nostro contatore di uno, poi modula quel numero con quante immagini ci sono. Questo manterrà l'indice risultante in bicicletta da 0
a length-1
, che sono gli indici dell'oggetto $images
. Ciò significa che questo codice funzionerà con 2, 3, 5, 10, o 100 immagini... ciclando attraverso ogni immagine in ordine e ripartendo dalla prima immagine quando si raggiunge l'ultima.
Inoltre, .attr()
è usato per ottenere e impostare l'attributo "src" delle immagini. Per prelevare elementi dall'oggetto $images
, imposto $images
come contesto jQuery usando la forma $(selector, context)
. Poi uso .eq()
per scegliere solo l'elemento con l'indice specifico che mi interessa.
br/>
Puoi anche memorizzare le src
in un array.
[esempio jsFiddle con 3 immagini][6]
Ed ecco come incorporare gli href dai tag di ancoraggio intorno alle immagini:
[esempio jsFiddle][7]
Potete anche farlo con jQuery in questo modo:
$(".c1 img").click(function(){
$(this).attr('src','/new/image/src.jpg');
});
Puoi avere una condizione se ci sono più stati per la fonte dell'immagine.