Bagaimana untuk menggantikan gambar dengan jquery

JQuery ialah perpustakaan JavaScript yang sangat popular di mana anda boleh mengendalikan dan mengawal pelbagai elemen dengan mudah pada halaman web, termasuk imej.

Dalam pembangunan web, salah satu senario yang lebih biasa ialah keperluan untuk menggantikan imej secara dinamik selepas pengguna mengklik pada elemen. Pada masa ini kita boleh menggunakan fungsi attr yang disediakan oleh JQuery untuk mencapai ini.

Mari kita ambil contoh konkrit untuk melihat cara menggunakan JQuery untuk menggantikan imej.

Andaikan terdapat imej pada halaman web kami dengan kod HTML berikut:

<img src="./imgs/1.jpg" id="myImg">

Apa yang kami mahu lakukan ialah menggantikan imej ini dengan imej lain apabila pengguna mengklik gambar butang. Katakan laluan imej lain ialah ./imgs/2.jpg.

Pertama, tentukan elemen butang dalam HTML:

<button id="changeBtn">更换图片</button>

Kemudian, gunakan JQuery dalam JS untuk melaksanakan fungsi menggantikan imej:

$(document).ready(function(){
    $("#changeBtn").click(function(){
        $("#myImg").attr("src", "./imgs/2.jpg");
    });
});

Di Atas Dalam kod, kami mula-mula menggunakan $(document).ready() untuk memastikan halaman web dimuatkan sepenuhnya sebelum melaksanakan kod berikutnya. Kemudian, kami mengikat acara click elemen butang dan fungsi panggil balik akan dicetuskan apabila pengguna mengklik butang.

Dalam fungsi panggil balik, kami memanggil $("#myImg").attr("src", "./imgs/2.jpg"), dengan $("#myImg") bermaksud memilih elemen imej dengan ID myImg dan .attr("src", "./imgs/2.jpg") bermaksud menetapkan atribut src elemen ini kepada ./imgs/2.jpg iaitu diganti dengan gambar lain.

Melalui kod di atas, kami telah melaksanakan fungsi mudah menggantikan gambar secara dinamik.

Selain kaedah di atas, anda juga boleh menggunakan fungsi replaceWith JQuery untuk menggantikan imej. Untuk penggunaan khusus, sila rujuk dokumentasi rasmi JQuery.

Ringkasan:

JQuery menyediakan API yang mudah untuk membantu kami mengendalikan dan mengawal pelbagai elemen pada halaman web, termasuk imej. Untuk menggantikan imej, hanya tetapkan atribut yang sepadan melalui fungsi attr atau fungsi replaceWith.

Atas ialah kandungan terperinci Bagaimana untuk menggantikan gambar dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!