Bagaimanakah Saya Boleh Mengubah Sumber Imej Secara Dinamik dalam Aplikasi Web Saya Menggunakan jQuery?

Memanipulasi Sumber Imej dengan jQuery

Dalam aplikasi web, mengawal penampilan visual elemen secara dinamik adalah penting untuk menarik pengalaman pengguna. Satu senario biasa ialah keperluan untuk menukar sumber imej berdasarkan interaksi pengguna.

Pertimbangkan senario di mana halaman web menampilkan dua imej:

<div>

Anda ingin menukar sumber imej kepada imgx_off .gif, dengan x mewakili nombor imej (1 atau 2), apabila pengguna mengklik padanya. Fungsi ini membenarkan perwakilan visual perubahan atau peralihan keadaan.

Penyelesaian Menggunakan jQuery's attr()

jQuery's attr() fungsi menyediakan cara serba boleh untuk memanipulasi atribut HTML secara dinamik. Dalam kes ini, ia membenarkan anda menukar atribut src imej.

Untuk melaksanakan fungsi ini:

1. Tetapkan id unik pada setiap imej, seperti img1 dan img2.
2. Gunakan fungsi attr() untuk menukar atribut src apabila imej itu diklik.

$('#img1').on({
    'click': function(){
        $('#img1').attr('src','img1_off.gif');
    }
});
$('#img2').on({
    'click': function(){
        $('#img2').attr('src','img2_off.gif');
    }
});

Putaran Sumber Imej

Untuk meningkatkan lagi fungsi, anda boleh melaksanakan putaran imej. Ini membolehkan imej bertukar dengan lancar antara dua keadaan yang dipratakrifkan (cth., daripada img1_on kepada img2_off dan sebaliknya).

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

Skrip ini menyemak atribut src semasa bagi imej yang diklik dan mengemas kininya dengan sumber imej yang sesuai berdasarkan keadaan semasa.

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