Bagaimanakah saya boleh menukar sumber imej secara dinamik menggunakan JavaScript pada klik?

Mengubah Suai Sumber Imej Secara Dinamik Menggunakan JavaScript

Dalam pembangunan web, mungkin perlu menukar atribut sumber tag imej (teg img) secara pemprograman untuk memaparkan imej yang berbeza berdasarkan interaksi pengguna atau kandungan dinamik. Untuk mencapai matlamat ini, JavaScript menyediakan pelbagai kaedah untuk memanipulasi elemen HTML.

Pertimbangkan senario berikut:

<img src="../template/edit.png" nama="edit-save" alt="Bagaimanakah saya boleh menukar sumber imej secara dinamik menggunakan JavaScript pada klik?"><br>

Pada mulanya, teg imej memaparkan imej dengan sumber "edit.png." Matlamatnya adalah untuk menukar sumber ini kepada "save.png" selepas mengklik imej. Untuk mencapai matlamat ini, teg HTML dengan pengendali acara onclick boleh digunakan, seperti yang ditunjukkan di bawah:

<a href="#" onclick="edit()"></a><br>

Bagaimanakah saya boleh menukar sumber imej secara dinamik menggunakan JavaScript pada klik?( ) kemudiannya boleh dilaksanakan dalam JavaScript untuk melaksanakan pengubahsuaian sumber yang diingini:

fungsi edit()<br>{<pre class="brush:php;toolbar:false">var inputs = document.myform;
for(var i = 0; i <p>}<br></p>

> ;

Dengan memberikan id pada teg imej ("edit-save" dalam kes ini), kod JavaScript boleh mengakses dan mengubah suai atribut srcnya. Coretan yang disediakan mengambil semula elemen HTML mengikut id dan menetapkan atribut srcnya kepada sumber yang diingini, mengubah imej yang dipaparkan dengan berkesan.

Perlu diingat bahawa kod asal yang anda berikan cuba mengendalikan pengubahsuaian src dalam pengeditan( ) fungsi, yang membawa kepada isu yang memerlukan dua klik untuk menukar sumber. Dengan memisahkan manipulasi sumber imej ke dalam langkah yang berasingan, anda boleh mengelakkan kesulitan ini dan memastikan sumber imej berubah serta-merta selepas klik pertama.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menukar sumber imej secara dinamik menggunakan JavaScript pada klik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!