Minun DOM näyttää tältä:
<div id="d1">
<div class="c1">
<a href="#"><img src="img1_on.gif"></a>
<a href="#"><img src="img2_on.gif"></a>
</div>
</div>
Kun joku klikkaa kuvaa, haluan kuvan src:n muuttuvan muotoon <img src="imgx_off.gif">
, jossa x
edustaa kuvan numeroa 1 tai 2.
Onko tämä mahdollista vai pitääkö minun käyttää CSS:ää kuvien vaihtamiseen?
Voit käyttää jQueryn attr()-funktiota. Jos esimerkiksi img
-tunnisteesi id
-attribuutti on 'my_image', voit tehdä näin:
<img id="my_image" src="first.jpg"/>
Sitten voit muuttaa kuvasi src
:n jQueryn avulla näin:
$("#my_image").attr("src","second.jpg");
Jos haluat liittää tämän click
-tapahtumaan, voit kirjoittaa:
$('#my_image').on({
'click': function(){
$('#my_image').attr('src','second.jpg');
}
});
Voit kääntää kuvaa seuraavasti:
$('img').on({
'click': function() {
var src = ($(this).attr('src') === 'img1_on.jpg')
? 'img2_on.jpg'
: 'img1_on.jpg';
$(this).attr('src', src);
}
});
Näytän sinulle, miten voit muuttaa kuvan src
, niin että kun napsautat kuvaa, se pyörii kaikkien HTML:ssä olevien kuvien läpi (erityisesti d1
id:ssä ja c1
luokassa)... olipa HTML:ssäsi sitten 2 tai enemmän kuvia.
Näytän myös, miten sivu siivotaan, kun dokumentti on valmis, niin että aluksi näytetään vain yksi kuva.
Koko koodi
$(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();
});
});
Jakauma
Luo kopio kuvia sisältävistä linkeistä (huom: voit myös hyödyntää linkkien href-attribuuttia lisätoiminnallisuuden lisäämiseksi... esimerkiksi [näytä toimiva linkki kunkin kuvan alla][1]):
var $kuvat = $("#d1 > .c1 > a").clone(); ;
Tarkista, kuinka monta kuvaa HTML:ssä oli ja luo muuttuja, jolla seurataan, mikä kuva näytetään:
var $length = $images.length;
var $imgShow = 0;
Muokkaa dokumentin HTML-tiedostoa niin, että näytetään vain ensimmäinen kuva. Poista kaikki muut kuvat.
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") ) );
Sitoudu funktioon, joka käsittelee, kun kuvalinkkiä napsautetaan.
$("#d1 > .c1 > a").click(function(event) {
$(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") ) );
event.preventDefault();
});
Yllä olevan koodin ytimessä käytetään ++$imgShow % $length
-koodia kuvien sisältävän jQuery-objektin läpikäymiseen. ++$imgShow % $length
kasvattaa ensin laskuria yhdellä, ja sitten se muuttaa tätä lukua kuvien lukumäärällä. Tämä pitää tuloksena olevan indeksin kiertävänä välillä 0
ja length-1
, jotka ovat $images
-objektin indeksit. Tämä tarkoittaa, että tämä koodi toimii 2, 3, 5, 10 tai 100 kuvan kanssa... käyden jokaisen kuvan läpi järjestyksessä ja aloittaen uudelleen ensimmäisestä kuvasta, kun viimeinen kuva on saavutettu.
Lisäksi .attr()
käytetään hakemaan ja asettamaan kuvien "src" -attribuutti. Poimiakseni elementtejä $kuvat
-objektin joukosta asetan $kuvat
jQuery-kontekstiksi käyttäen muotoa $(selector, context)
. Sitten käytän .eq()
poimiakseni vain sen elementin, jolla on tietty indeksi, josta olen kiinnostunut.
Voit myös tallentaa src
:t arrayyn.
[jsFiddle-esimerkki, jossa on 3 kuvaa][6]
Ja tässä'on, kuinka sisällyttää hrefs ankkuritunnisteista kuvien ympärille:
[jsFiddle-esimerkki][7]
Voit tehdä tämän myös jQueryn avulla tällä tavalla:
$(".c1 img").click(function(){
$(this).attr('src','/new/image/src.jpg');
});
Sinulla voi olla ehto, jos kuvalähteellä on useita tiloja.