Mengapa jQuery Tidak Menambah Kelas pada Elemen SVG dengan Boleh Dipercayai?

jQuery SVG: Had dengan Pengubahsuaian Kelas

Apabila cuba memanipulasi kelas pada elemen SVG menggunakan jQuery, anda mungkin menghadapi kesukaran. Mari teroka isu ini.

Dalam kod yang anda berikan, anda cuba menambah kelas "diklik" pada segi empat tepat SVG menggunakan .addClass(). Walau bagaimanapun, kaedah ini mungkin tidak berfungsi dengan betul disebabkan oleh had asas dalam jQuery.

Versi JQuery sebelum 3 mempunyai isu yang diketahui apabila berinteraksi dengan elemen SVG. Khususnya, mereka tidak boleh menambah atau mengalih keluar kelas dengan pasti daripada elemen SVG. Ini kerana jQuery memanipulasi DOM HTML asas dan elemen SVG mempunyai perwakilan dalaman yang berbeza.

Penyelesaian:

Untuk mengatasi had ini, anda boleh menggunakan perkara berikut penyelesaian:

• Naik taraf kepada jQuery 3: Versi 3 jQuery menangani isu dengan manipulasi kelas SVG. Jika boleh, kemas kini kepada versi ini untuk menyelesaikan masalah.
• Gunakan JavaScript Vanila: Dalam penyemak imbas moden, anda boleh mengakses terus sifat classList elemen dan mengubah suainya. Contohnya:

const element = document.getElementById("p5");
element.classList.add("clicked");

• Gunakan jQuery's .attr(): Anda boleh menggunakan .attr() untuk memanipulasi atribut kelas. Walau bagaimanapun, ingat bahawa ini mengubah keseluruhan senarai kelas, bukannya hanya menambah atau mengalih keluar kelas individu.

$("#p5").attr("class", "jimmy clicked");

Dengan melaksanakan penyelesaian ini, anda seharusnya dapat menambah dan mengalih keluar kelas dengan berkesan daripada elemen SVG menggunakan jQuery atau JavaScript vanilla.

Atas ialah kandungan terperinci Mengapa jQuery Tidak Menambah Kelas pada Elemen SVG dengan Boleh Dipercayai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!