Rumah >hujung hadapan web >tutorial js >Bagaimanakah jQuery Boleh Digunakan untuk Mengubah Sumber Imej Secara Dinamik pada Klik?

Bagaimanakah jQuery Boleh Digunakan untuk Mengubah Sumber Imej Secara Dinamik pada Klik?

Patricia Arquette
Patricia Arquetteasal
2024-12-04 09:17:11543semak imbas

How Can jQuery Be Used to Dynamically Change Image Sources on Click?

Menggunakan jQuery untuk Mengubah Sumber Imej

Dalam struktur web seperti:

<div>

apabila pengguna mengklik pada imej, anda ditugaskan untuk mengemas kini sumbernya kepada imgx_off.gif, dengan x mewakili imej nombor.

Adakah jQuery mampu mengendalikan tugas ini, atau adakah CSS kaedah pilihan?

Menggunakan Fungsi attr() jQuery

jQuery menyediakan attr(), membolehkan anda mengubah suai nilai atribut. Untuk menukar sumber imej dengan ID my_image:

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

Perubahan Imej Berasaskan Peristiwa

Sambungkan kod ini ke acara klik:

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

Putaran Imej

Untuk melaksanakan imej putaran:

$('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 jQuery Boleh Digunakan untuk Mengubah Sumber Imej Secara Dinamik pada Klik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn