Bagaimana untuk Mengubah Imej pada Klik Tanpa JavaScript Ekstensif?

Menukar Imej dengan Klik: Pendekatan Mudah

Apabila berhadapan dengan tugas menukar imej secara dinamik pada acara klik, seseorang pada mulanya mungkin menggunakan JavaScript atau jQuery untuk penyelesaian pantas. Walau bagaimanapun, untuk senario yang lebih mudah, terdapat alternatif yang mengelakkan keperluan kod JavaScript yang meluas.

Untuk menukar imej dengan mudah, pertimbangkan untuk menambah ID unik pada elemen imej anda, seperti yang dilihat di bawah:

<ul>
  <li><img src="image1.png">

Seterusnya, cipta fungsi JavaScript mudah untuk mengendalikan pertukaran imej pada klik:

function changeImage(image) {
  // Get the current image source
  let currentSrc = image.src;

  // Replace the source with the new image
  const newSrc = currentSrc.replace(".png", "_colored.png");
  image.src = newSrc;
}

Dalam fungsi ini, arus sumber imej diambil dan digantikan dengan sumber baharu yang termasuk "_colored" dalam namanya.

Akhir sekali, tambahkan pendengar acara onclick pada setiap imej untuk memanggil fungsi changeImage() apabila diklik:

<ul>
  <li><img src="image1.png">

Dengan pendekatan ini, imej boleh ditukar dengan lancar pada klik tanpa memerlukan pemilih JavaScript atau pseudo yang kompleks.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Imej pada Klik Tanpa JavaScript Ekstensif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!