Bagaimanakah Saya Boleh Mengubah Sumber Imej Secara Dinamik dengan jQuery on Click?

Mengubah suai Sumber Imej dengan jQuery

Objektif anda adalah untuk mengubah sumber imej secara dinamik dalam struktur DOM berikut:

<div>

Setelah mengklik setiap imej, anda ingin menukar sumbernya kepada "imgx_off.gif," di mana "x" sepadan dengan sama ada "1" atau "2."

Penyelesaian: Memanfaatkan Fungsi attr() jQuery

Ya, ia boleh dilakukan tanpa CSS. Kaedah attr() jQuery membolehkan anda mengubah suai atribut elemen DOM, termasuk URL sumber imej.

Sebagai contoh, jika teg imej anda mempunyai atribut id bagi "my_image", kod berikut akan berjaya:

<img>

$('#my_image').attr("src", "second.jpg");

Untuk melampirkan tindakan ini pada satu klik acara:

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

Putaran Imej

Jika anda ingin memutarkan imej, gunakan kod ini:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Sumber Imej Secara Dinamik dengan jQuery on Click?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!