Bagaimana untuk menukar imej dalam jquery

Dalam pembangunan bahagian hadapan, selalunya perlu menukar imej pada halaman secara dinamik mengikut keadaan atau peristiwa yang berbeza Pada masa ini, jQuery diperlukan untuk melengkapkan penukaran imej.

Berikut akan memperkenalkan dua kaedah penukaran imej jQuery yang biasa digunakan.

1. Tukar imej dengan menambah kelas CSS

Kaedah ini adalah untuk menukar imej dengan menambah atau mengalih keluar kelas CSS pada imej.

Kod HTML:

<img id="myImage" src="image1.jpg" alt="MyImage">
<button id="changeImage">Change Image</button>

Kod JavaScript:

$(document).ready(function(){
  $("#changeImage").click(function(){
    $("#myImage").toggleClass("image2");
    if($("#myImage").hasClass("image2")){
      $("#myImage").attr("src", "image2.jpg");
    }else{
      $("#myImage").attr("src", "image1.jpg");
    }
  });
});

Kod CSS:

.image2 {
  content: url(image2.jpg);
}

Kami mentakrifkan imej dan butang dalam kod HTML, klik Kod JavaScript akan dicetuskan selepas butang untuk menukar alamat sumber imej dengan menambah atau mengalih keluar kelas CSS pada imej. Pada masa yang sama, kami menentukan kelas .image2 dalam fail CSS supaya alamat sumber imej boleh ditukar secara dinamik.

2. Tukar imej melalui kaedah attr() jQuery

Kaedah ini adalah untuk menukar alamat sumber imej secara langsung melalui kaedah attr() jQuery.

Kod HTML:

<img id="myImage" src="image1.jpg" alt="MyImage">
<button id="changeImage">Change Image</button>

Kod JavaScript:

$(document).ready(function(){
  $("#changeImage").click(function(){
    var imgSrc = $("#myImage").attr("src");
    if(imgSrc == "image1.jpg"){
      $("#myImage").attr("src", "image2.jpg");
    }else{
      $("#myImage").attr("src", "image1.jpg");
    }
  });
});

Kami juga menentukan imej dan butang dalam kod HTML Apabila butang diklik, kod JavaScript akan menjadi dicetuskan melalui attr() Kaedah untuk menukar alamat sumber imej dan mencapai penukaran imej.

Ringkasan

Di atas ialah dua kaedah penukaran imej jQuery yang biasa digunakan. Penukaran imej dinamik boleh dicapai dengan menambah atau mengalih keluar kelas CSS dan menukar alamat sumber imej secara langsung. Kita boleh memilih kaedah yang berbeza untuk mencapai kesan penukaran imej mengikut keperluan tertentu.

Atas ialah kandungan terperinci Bagaimana untuk menukar imej dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!