kotak semak jquery menyemak penyelesaian masalah pepijat dan analysis_jquery

Semasa saya menjalankan projek, saya menemui pepijat dalam kotak semak jQuery Selepas berunding dengan pakar, saya telah merakamnya di sini dan menganalisisnya untuk semua orang.

Masukkan kod dahulu:

Salin kod Kod adalah seperti berikut:

Apakah sukan kegemaran anda? Pilih semua/nyahpilih semua

           football
           Bola Keranjang
            Badminton
           Pingpong
          

        

Salin kod Kod adalah seperti berikut:

$("#CheckedAll").klik(fungsi () {
Jika ($(this).is(":checked")) {
$("[name=item]:checkbox").attr("checked", true);
                    } lain {
                                 $("[nama=item]:kotak semak").attr("ditandai", palsu);
                }
            });

Kali pertama saya melaksanakannya, tiada masalah, tetapi kali kedua saya melaksanakannya ada masalah dan saya tidak boleh memilih

Penyelesaian: Gantikan attr() dengan prop()

Salin kod Kod adalah seperti berikut:

$("#CheckedAll").klik(fungsi () {
Jika ($(this).is(":checked")) {
                            $("[nama=item]:kotak semak").prop("ditandai", benar);
                    } lain {
                              $("[nama=item]:kotak semak").prop("ditandai", palsu);
                }
            });

PS: Perbezaan antara prop() dan attr():

Baru-baru ini saya melihat dalam berita iteye bahawa jQuery telah dikemas kini kepada 1.6.1. Perubahan terbesar daripada versi sebelumnya ialah penambahan kaedah .prop. Walau bagaimanapun, adalah sukar untuk membezakan antara kaedah .prop() dan kaedah .attr() secara literal. Dalam bahasa Cina, sifat dan sifat kedua-duanya bermaksud "sifat".
Berikut ialah terjemahan ringkas penggunaan .prop() dan .attr() berdasarkan catatan blog ini (javascript:mctmp(0);):

1. Naik taraf daripada 1.5.2 kepada 1.6.1

Dengan memperkenalkan kaedah baharu .prop() dan perubahan pada kaedah .attr(), jQuery 1.6.1 mencetuskan perbincangan hangat tentang perbezaan dan hubungan antara atribut dan sifat. Pada masa yang sama, 1.6.1 juga menyelesaikan beberapa isu keserasian ke belakang. Apabila menaik taraf daripada 1.5.2 kepada 1.6.1, anda tidak perlu mengubah suai sebarang kod atribut.

Berikut ialah penerangan tentang perubahan dalam modul Atribut dalam jQuery 1.6 dan 1.6.1, serta penggunaan pilihan kaedah .attr() dan kaedah .prop(). Walau bagaimanapun, seperti yang dinyatakan sebelum ini, jQuery 1.6.1 membenarkan anda menggunakan kaedah .attr() seperti yang digunakan dalam semua kes sebelum ini.

2. Apakah perubahan yang telah berlaku

Perubahan kepada modul Atribut adalah untuk mengalih keluar kekaburan antara atribut dan sifat, tetapi menyebabkan beberapa kekeliruan dalam komuniti jQuery kerana dalam semua versi sebelum 1.6 ia dikendalikan menggunakan satu kaedah (.attr()) atribut dan sifat. Tetapi kaedah .attr() lama mempunyai beberapa pepijat dan sukar untuk dikekalkan. jQuery1.6.1 mengemas kini modul Atribut dan membetulkan beberapa pepijat.

Sebutan khusus ialah atribut boolean, seperti: ditandai, dipilih, baca sahaja dan dilumpuhkan, dianggap sama dalam 1.6.1 seperti sebelum 1.6. Ini bermakna kod berikut:

Salin kod Kod adalah seperti berikut:

$(“: kotak semak”).attr(“ditanda”, benar); $(“pilihan”).attr(“dipilih”, benar); $(“input”).attr(“baca sahaja”, benar); $(“input”).attr(“disabled”, true);



Kod genap seperti ini:

Salin kod Kod adalah seperti berikut: if ($(“:checkbox”).attr(“checked”) ) { /* Lakukan sesuatu */ }

Tiada perubahan diperlukan dalam 1.6.1 untuk mengekalkan prestasi yang dijangkakan sebelum ini.

Untuk membuat perubahan dalam kaedah .attr() dalam jQuery 1.6 dengan lebih jelas, berikut ialah beberapa contoh penggunaan .attr() Walaupun ia boleh berfungsi seperti biasa dalam versi jQuery sebelumnya, ia mesti digunakan sekarang () kaedah sebaliknya:

Pertama sekali, menggunakan kaedah .attr() dalam tetingkap atau dokumen tidak berfungsi dengan betul dalam jQuery 1.6 kerana tidak boleh ada atribut dalam tetingkap dan dokumen. Ia mengandungi sifat (seperti lokasi atau readyState) dan mesti dimanipulasi menggunakan kaedah .prop() atau hanya menggunakan kaedah JavaScript asli. Dalam jQuery 1.6.1, menggunakan .attr() dalam tetingkap dan dokumen akan ditukar secara automatik kepada menggunakan .prop dan bukannya membuang ralat.

Kedua, atribut boolean yang disemak, dipilih dan lain-lain yang disebut sebelum ini dilayan secara khusus kerana hubungan istimewa antara atribut ini dan sifat sepadannya. Pada asasnya, atribut ialah apa yang anda lihat dalam html berikut:

atribut boolean, seperti ditandakan, hanya ditetapkan kepada nilai lalai atau awal. Dalam elemen kotak semak, atribut yang ditandai ditetapkan apabila halaman dimuatkan, tidak kira sama ada elemen kotak pilihan dipilih.

Properti ialah perkara yang digunakan oleh penyemak imbas untuk merekodkan nilai semasa. Biasanya, sifat mencerminkan sifat yang sepadan (jika ada). Tetapi ini tidak berlaku dengan atribut boolean. Sifat Boolean sentiasa dikemas kini apabila pengguna mengklik elemen kotak semak atau memilih pilihan dalam elemen pilih. Tetapi atribut boolean yang sepadan adalah berbeza Seperti yang dinyatakan di atas, ia hanya digunakan oleh penyemak imbas untuk menyimpan nilai awal.

Salin kod

Kod adalah seperti berikut: $(“: kotak semak”).get(0).checked = true; // Adakah sama dengan $(":checkbox:first").prop("checked", true);

Dalam jQuery1.6, jika anda menggunakan kaedah berikut untuk menetapkan ditanda:

Salin kod

Kod adalah seperti berikut: $(“: kotak semak”).attr(“ditanda”, benar);

Elemen kotak pilihan tidak akan ditandakan kerana ia adalah sifat yang perlu ditetapkan, tetapi semua tetapan anda akan menjadi nilai awal.

Walau bagaimanapun, sebaik sahaja jQuery 1.6 dikeluarkan, pasukan jQuery memahami bahawa menetapkan beberapa nilai tidak begitu berguna apabila penyemak imbas hanya mengambil berat tentang pemuatan halaman. Oleh itu, untuk mengekalkan keserasian ke belakang dan kegunaan kaedah .attr(), kita boleh terus menggunakan kaedah .attr() untuk mendapatkan dan menetapkan atribut boolean ini dalam jQuery 1.6.1.

Atribut yang paling biasa disemak, dipilih, dilumpuhkan dan baca Sahaja, tetapi berikut ialah senarai lengkap sokongan jQuery 1.6.1 menggunakan .attr() untuk mendapatkan dan menetapkan atribut/sifat boolean secara dinamik:

autofokus, automain, async, diperiksa, kawalan, tangguh, dilumpuhkan,
tersembunyi, gelung, berbilang, buka, baca sahaja, diperlukan, berskop, dipilih

(Nota penterjemah: Kebanyakannya ialah atribut baharu yang ditambahkan pada html5)

Adalah masih disyorkan untuk menggunakan kaedah .prop() untuk menetapkan atribut/sifat boolean ini Walaupun kes penggunaan ini tidak ditukar untuk menggunakan kaedah .prop(), kod anda masih boleh berjalan seperti biasa dalam jQuery 1.6. 1.

Berikut ialah senarai beberapa atribut dan sifat Dalam keadaan biasa, anda harus menggunakan kaedah yang sepadan (lihat senarai di bawah) untuk mendapatkan dan menetapkannya. Berikut ialah penggunaan pertama, tetapi kaedah .attr() akan berfungsi dengan semua atribut.

Nota: Beberapa sifat elemen DOM juga disenaraikan di bawah, tetapi hanya dijalankan dalam kaedah .prop() baharu

*Contohnya: tingkap.lokasi
**Jika perlu melebihi (jika perlu melebihi) .width()

Sama ada .attr() mahupun .prop() harus digunakan untuk mendapatkan/menetapkan nilai. Gunakan kaedah .val() sebaliknya (walaupun menggunakan .attr("value","somevalue") akan terus berfungsi, sama seperti sebelum 1.6)

3. Gambaran keseluruhan penggunaan pilihan

Kaedah

.prop() hendaklah digunakan untuk mengendalikan atribut/sifat boolean dan sifat yang tidak wujud dalam html (cth: window.location). Semua atribut lain (yang anda lihat dalam HTML) boleh dan harus terus dimanipulasi menggunakan kaedah .attr().

Ringkasan di atas telah diterangkan dengan cukup jelas, dan saya tidak perlu meringkaskannya dengan lebih lanjut.