Bagaimana untuk Mengubah Imej pada Klik Menggunakan Kaedah JavaScript Mudah?

Cara Menukar Imej pada Klik Menggunakan Kaedah Mudah

Dalam senario ini, anda ingin menggantikan imej dengan versi lain apabila mengklik pada elemen induk. Walaupun anda boleh menggunakan rangka kerja JavaScript yang rumit seperti jQuery, tugas ini boleh dicapai dengan kaedah yang lebih mudah.

Pertimbangkan struktur HTML berikut:

<li><img src="default.jpg" alt="Image 1" /></li>
<li><img src="default.jpg" alt="Image 2" /></li>
<li><img src="default.jpg" alt="Image 3" /></li>
<li><img src="default.jpg" alt="Image 4" /></li>
<li><img src="default.jpg" alt="Image 5" /></li>

Menggunakan Atribut ID:

Tetapkan ID unik pada imej yang ingin anda ubah:

<img src="default.jpg" alt="Image 1">

Kemudian, dalam JavaScript anda, gunakan fungsi document.getElementById:

document.getElementById("image1").src = "colored.jpg";

Menggunakan Pemilih Kelas:

Tambahkan kelas pada imej yang ingin anda ubah:

<img src="default.jpg" alt="Image 1" class="image" />

Document.querySelectorAll mengembalikan semua elemen yang sepadan dengan pemilih CSS yang diberikan.

const images = document.querySelectorAll(".image");
images.forEach((image) => {
  image.src = "colored.jpg";
});

Menggunakan Kelas Pseudo Aktif:

Apabila elemen diklik, kelas pseudo aktif digunakan padanya. Ini boleh digunakan untuk menukar imej apabila elemen diklik:

<img src="default.jpg" alt="Image 1" />

li:active img {
  src: "colored.jpg";
}

Kaedah ini menyediakan alternatif yang lebih mudah untuk mengemas kini imej pada klik, tanpa bergantung pada rangka kerja JavaScript yang kompleks.

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