Bagaimana Saya Boleh Menukar Imej dengan Mudah pada Klik Tanpa JavaScript Rumit?

Mengubah Imej pada Klik dengan Kesederhanaan

Pertanyaan anda mengenai pengubahsuaian imej pada klik menyerlahkan keperluan untuk penyelesaian yang mudah tanpa kod JavaScript yang berlebihan. Berikut ialah pendekatan yang memanfaatkan HTML dan JavaScript untuk mencapai hasil yang anda inginkan.

Penanda HTML:

Tetapkan pengecam unik pada setiap imej menggunakan atribut "id":

<pre class="brush:php;toolbar:false">
<li><img alt="" src="image1.jpg">

Fungsi JavaScript:

Buat fungsi JavaScript untuk mengendalikan pertukaran imej pada klik:

function swapImage(imageId) {
  var image = document.getElementById(imageId);
  if (image.src.endsWith(".jpg")) {
    image.src = image.src.replace(".jpg", ".png");
  } else {
    image.src = image.src.replace(".png", ".jpg");
  }
}

Pengendalian Acara:

Lampirkan pendengar acara "onclick" pada setiap imej, memberikan ID imej yang sepadan:

<pre class="brush:php;toolbar:false">
<li><img alt="" src="image1.jpg">

Fungsi:

Apabila anda mengklik pada imej, fungsi swapImage() digunakan, yang menyemak sambungan fail semasa imej itu. Jika ia adalah ".jpg", fungsi itu menggantikannya dengan ".png," dengan berkesan menukar imej. Jika ia adalah ".png," fungsi itu membalikkan proses, menukarnya kembali kepada ".jpg."

Pendekatan ini memanfaatkan HTML dan JavaScript untuk mengubah suai imej dengan satu klik tanpa memerlukan kelas CSS tambahan atau pseudo pemilih, menyediakan penyelesaian yang mudah dan cekap untuk pertanyaan anda.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Menukar Imej dengan Mudah pada Klik Tanpa JavaScript Rumit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!