Tukar laluan imej melalui jquery

WBOY
Lepaskan: 2023-05-14 12:34:40
asal
1634 orang telah melayarinya

Dengan pembangunan tapak web yang berterusan, permintaan untuk kesan dinamik juga semakin tinggi dan lebih tinggi Sebagai perpustakaan JavaScript yang pantas, ringkas dan mudah, jQuery sangat memudahkan proses pembangunan halaman hadapan. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mencapai kesan menukar laluan imej.

1. Analisis Keperluan

Apabila kita memerlukan beberapa set kulit atau tema yang berbeza, sudah pasti ia akan menjadi sangat menyusahkan jika kita perlu mengubah suai laluan semua imej secara manual setiap kali kita menukar kulit perkara. Oleh itu, kita memerlukan cara yang lebih mudah untuk menukar laluan imej.

2. Reka bentuk penyelesaian

1. Tambahkan atribut kelas pada imej yang laluannya perlu diubah, seperti "laluan tukar".

<img  src="img/1.jpg" class="change-path" / alt="Tukar laluan imej melalui jquery" >
Salin selepas log masuk

2. Dapatkan teg img ini melalui jQuery dan gantikan laluannya.

$('.change-path').each(function() {
    var oldSrc = $(this).attr('src'); //获取原图片路径
    var newSrc = 'newPath/' + oldSrc.substring(oldSrc.lastIndexOf('/') + 1); //构造新图片路径,这里假设新路径为“newPath/”
    $(this).attr('src', newSrc); //替换图片路径
});
Salin selepas log masuk

3. Pelaksanaan Kod

Seterusnya kita akan menggunakan contoh mudah untuk menunjukkan cara menukar laluan imej melalui jQuery.

1. Persediaan

Sebelum ini kita perlu sediakan beberapa gambar. Seperti yang ditunjukkan dalam rajah di bawah:

Tukar laluan imej melalui jquery

2. Laksanakan kod

Tambah kod berikut dalam fail HTML:




    
    Change Image Path
    


    

Change Image Path

<img src="img/1.jpg" class="change-path" / alt="Tukar laluan imej melalui jquery" > Tukar laluan imej melalui jquery Tukar laluan imej melalui jquery <script> $('.change-path').each(function() { var oldSrc = $(this).attr('src'); var newSrc = 'newPath/' + oldSrc.substring(oldSrc.lastIndexOf('/') + 1); $(this).attr('src', newSrc); }); </script>
Salin selepas log masuk

In kod ini, Kami mula-mula memperkenalkan perpustakaan jQuery. Kemudian, kami menggunakan pemilih $(".change-path") untuk mendapatkan semua teg img dengan atribut kelas "change-path", dan kemudian menggunakan kaedah .each() untuk beralih melalui teg ini. Apabila merentasi setiap teg, kami memperoleh nilai atribut src asal setiap teg melalui kaedah .attr() dan menetapkannya kepada oldSrc pembolehubah. Kemudian, kami mengubah suai oldSrc mengikut keperluan dan mendapatkan newSrc. Akhir sekali, kami menetapkan nilai yang diubah suai kepada atribut src asal melalui kaedah .attr().

3. Kesan pelaksanaan

Selepas menjalankan kod ini, kita dapat melihat kesan berikut:

Tukar laluan imej melalui jquery

Seperti yang anda lihat, semua gambar Laluan telah diubah suai kepada "newPath/1.jpg", "newPath/2.jpg" dan "newPath/3.jpg", yang memenuhi keperluan kita.

4. Ringkasan

Artikel ini memperkenalkan cara menukar laluan imej melalui jQuery. Melalui kaedah ini, kami boleh mengubah suai semua gambar dengan mudah yang perlu menukar laluan, menjadikan pembangunan kami berfungsi lebih cekap dan mudah. Sudah tentu, jQuery juga boleh digunakan untuk melaksanakan lebih banyak kesan dinamik lain, dan pembaca boleh mempelajari dan menggunakannya mengikut keperluan mereka sendiri.

Atas ialah kandungan terperinci Tukar laluan imej melalui jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan