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:

• 

  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:

  • 

    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!