Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyelesaikan masalah jquery yang dipilih tidak berubah
Bagaimana untuk menyelesaikan masalah jquery yang dipilih tidak berubah
- PHPzasal
- 2023-04-17 11:28:46920semak imbas
Apabila membangunkan tapak web, kami sering menggunakan jQuery untuk memanipulasi elemen DOM. Satu operasi biasa ialah memilih elemen dan mengubah suai sifat atau kandungannya. Dalam jQuery, anda boleh menggunakan pemilih untuk memilih elemen yang perlu dikendalikan. Walau bagaimanapun, kadangkala kami mendapati bahawa walaupun elemen telah dipilih melalui pemilih, mengubah suai atribut atau kandungannya tidak akan berkuat kuasa. Jadi, bagaimana untuk menyelesaikan situasi ini?
Demonstrasi Kes
Mari kita lihat kes mudah untuk lebih memahami masalah itu. Di bawah ialah fail HTML yang mengandungi beberapa perenggan dan butang:
<!DOCTYPE html>
<html>
<head>
<title>jQuery selected没有改变</title>
</head>
<body>
<p id="para1">Hello World!</p>
<p class="para2">jQuery is awesome!</p>
<button id="btn1">改变段落内容</button>
<button id="btn2">改变按钮文本</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#para1").text("Paragraph 1内容已改变！"); //改变段落1的内容
});
$("#btn2").click(function(){
$(".para2").text("Paragraph 2内容已改变！"); //改变所有class为para2的段落的内容
});
});
</script>
</body>
</html>
Seperti yang anda lihat, dalam kes ini, kami menggunakan jQuery untuk memilih dua elemen. Satu ialah perenggan dengan ID "para1", dan satu lagi ialah semua perenggan dengan kelas "para2". Kami cuba menggunakan jQuery untuk mengubah suai kandungan butang apabila ia diklik.
Tidak boleh menukar kandungan
Namun, apabila kita menjalankan contoh dan cuba menukar kandungan perenggan kepada nilai baharu, kita nampak tiada perubahan.
Berikut ialah beberapa sebab yang mungkin:
- Terdapat kesilapan taip dalam kod yang menghalang kod daripada melaksanakan seperti yang dijangkakan.
- Pemilih tidak memilih elemen sebenar.
- Kod cuba menukar harta atau nilai harta yang tidak boleh diubah.
Jika masalah ini berlaku, kita boleh menggunakan alat pembangun penyemak imbas untuk menyemak punca masalah.
Kod Nyahpepijat
Dalam contoh ini, buka alat pembangun penyemak imbas anda (tekan F12) dan pilih tab "Elemen" dalam kod HTML. Dalam tab ini, anda boleh melihat nilai elemen DOM serta sifat CSS.
Kita akan melihat bahawa nilai dalam perenggan pertama tidak diubah suai dengan betul, tetapi masih "Hello World!", dan kandungan perenggan kedua belum diubah suai kepada "Kandungan Perenggan 2 telah diubah !". Ini bermakna kita perlu menyemak pemilih dan kod.
Semak Pemilih
Pertama, pastikan pemilih memilih elemen yang betul. Dalam contoh ini, kami menggunakan dua pemilih: pemilih ID dan pemilih kelas. Gunakan simbol # dalam pemilih untuk mewakili pemilih ID, dan gunakan simbol .
Sebagai contoh, pemilih "#para1" akan memilih elemen dengan id "para1"; pemilih ".para2" akan memilih semua elemen dengan kelas "para2".
Pastikan tiada ralat dalam pemilih.
Semak kod
Seterusnya, semak kod itu betul. Dalam contoh ini, kami cuba mengubah suai kandungan perenggan dalam pengendali acara klik butang. Kami menggunakan kaedah .text() jQuery untuk mengubah suai kandungan perenggan.
Sebagai contoh, $("#para1").text("Kandungan Perenggan 1 telah berubah!"); akan memilih perenggan dengan ID elemen "para1" dan menukar teksnya kepada "Kandungan Perenggan 1 telah telah diubah!" Ubah!".
Pastikan kod memanggil kaedah dan sifat yang betul dan tiada ralat sintaks.
Selesaikan masalah
Dengan memeriksa pemilih dan kod, kami boleh menemui punca dan menyelesaikan masalah.
Dalam contoh ini, apabila kami memeriksa kod, kami mendapati bahawa operasi pengubahsuaian tidak dilakukan dengan betul. Sebabnya ialah kami tidak membuat panggilan yang betul semasa mengubah suai operasi Kami harus menggunakan kod berikut:
$(document).ready(function(){
$("#btn1").click(function(){
$("#para1").text("Paragraph 1内容已更改！");
});
$("#btn2").click(function(){
$(".para2").text("Paragraph 2内容已更改！");
});
});
Selepas melaksanakan kod di atas dengan betul, kami memuat semula halaman web. Kini, kami mendapati ia berfungsi dengan baik dan kandungan perenggan berjaya diubah suai.
Ringkasan
Artikel ini memperkenalkan secara ringkas masalah yang mungkin timbul apabila memilih elemen dan mengubah suai atribut atau kandungannya dalam jQuery. Apabila masalah berlaku, kita harus menggunakan alat pembangun penyemak imbas untuk menyemak kod dan pemilih untuk mencari punca masalah. Hanya dengan menyemak dan mengubah suai kod masalah akhirnya dapat diselesaikan dan operasi normal halaman web dapat dipastikan.
Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah jquery yang dipilih tidak berubah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!