Minu DOM näeb välja selline:
<div id="d1">
<div class="c1">
<a href="#"><img src="img1_on.gif"></a>
<a href="#"><img src="img2_on.gif"></a>
</div>
</div>
Kui keegi klõpsab pildil, tahan, et pildi src muutuks <img src="imgx_off.gif">
, kus x
tähistab pildi numbrit 1 või 2.
Kas see on võimalik või pean ma CSS-i kasutama, et muuta pilte?
Võite kasutada jQuery's attr() funktsiooni. Näiteks kui teie img
sildil on atribuut id
'my_image', siis teete seda nii:
<img id="my_image" src="first.jpg"/>
Seejärel saate oma pildi src
i muuta jQuery abil nii:
$("#my_image").attr("src","second.jpg");
Selle kinnitamiseks click
sündmuse külge võiksite kirjutada:
$('#my_image').on({
'click': function(){
$('#my_image').attr('src','second.jpg');
}
});
Pildi pööramiseks võiksite teha nii:
$('img').on({
'click': function() {
var src = ($(this).attr('src') === 'img1_on.jpg')
? 'img2_on.jpg'
: 'img1_on.jpg';
$(this).attr('src', src);
}
});
Ma näitan teile, kuidas muuta pildi src
, nii et kui te klõpsate pildil, siis see pöörleb läbi kõigi piltide, mis on teie HTML-is (teie d1
id ja c1
klassis konkreetselt)... kas teil on 2 või rohkem pilte teie HTML-is.
Ma'näitan ka, kuidas pärast dokumendi valmimist lehte puhastada, nii et esialgu kuvatakse ainult üks pilt.
Täielik kood
$(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();
});
});
Jagamine
Looge pilte sisaldavate linkide koopia (märkus: lisafunktsionaalsuse lisamiseks võite kasutada ka linkide href atribuuti... näiteks [kuvada iga pildi all töötav link][1]):
var $images = $("#d1 > .c1 > a").clone(); ;
Kontrollige, mitu pilti oli HTML-is ja looge muutuja, et jälgida, millist pilti näidatakse:
var $length = $images.length;
var $imgShow = 0;
Muutke dokumenti's HTML nii, et näidatakse ainult esimest pilti. Kustutage kõik teised pildid.
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") ) );
Siduda funktsioon, mis käitleb, kui pildi lingile vajutatakse.
$("#d1 > .c1 > a").click(function(event) {
$(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") ) );
event.preventDefault();
});
Ülaltoodud koodi keskmes on ++$imgShow % $length
kasutamine pilte sisaldava jQuery objekti läbimiseks. ++$imgShow % $length
suurendab kõigepealt meie loendurit ühe võrra, seejärel muudab see number, kui palju pilte on. See hoiab saadud indeksit tsükliliselt alates 0
kuni length-1
, mis on objekti $images
indeksid. See tähendab, et see kood töötab 2, 3, 5, 10 või 100 pildiga... läbides iga pilti järjekorras ja alustades uuesti esimese pildi juures, kui viimane pilt on saavutatud.
Lisaks kasutatakse .attr()
piltide "src" atribuudi saamiseks ja seadmiseks. Et valida elemente objektist $images
, sean $images
vormi $(selector, context)
abil jQuery kontekstiks. Seejärel kasutan .eq()
, et valida ainult see element, millel on konkreetne indeks, millest ma olen huvitatud.
Võite salvestada src
s ka massiivi.
[jsFiddle näide 3 pildiga][6]
Ja siin'on, kuidas lisada hrefs ankurdusmärkidest piltide ümber:
[jsFiddle näide][7]
Seda saab teha ka jQueryga sel viisil:
$(".c1 img").click(function(){
$(this).attr('src','/new/image/src.jpg');
});
Teil võib olla tingimus, kui pildiallika jaoks on mitu seisundit.