Pildi allika muutmine jQuery abil

Võite kasutada jQuery's attr() funktsiooni. Näiteks kui teie img sildil on atribuut id 'my_image', siis teete seda nii:

Seejärel saate oma pildi srci 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

1. 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(); ;

2. Kontrollige, mitu pilti oli HTML-is ja looge muutuja, et jälgida, millist pilti näidatakse:

   var $length = $images.length;
   var $imgShow = 0;

3. Muutke dokumenti's HTML nii, et näidatakse ainult esimest pilti. Kustutage kõik teised pildid.

   $("#d1 > .c1").html( $("#d1 > .c1 > a:first") ) );

4. 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.

[jsFiddle näide 3 pildiga][5]

Võite salvestada srcs 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.