Mengapa jQuery AddClass() Tidak Berfungsi pada Elemen SVG, dan Bagaimana Saya Boleh Membetulkannya?

Isu Manipulasi Kelas SVG jQuery

Dalam bidang manipulasi SVG jQuery, pengguna kadangkala menghadapi kesukaran menambah atau mengalih keluar kelas daripada elemen SVG. Senario biasa yang mencetuskan masalah ini ialah menyasarkan objek SVG dengan jQuery dan cuba menggunakan kaedah .addClass().

Coretan kod yang disediakan menyerlahkan isu:

<rect class="jimmy"></rect>

$(".jimmy").click(function() {
    $(this).addClass("clicked");
});

Walaupun integrasi jQuery dan SVG berfungsi dengan sempurna untuk pengendalian acara, kelas manipulasi tetap tidak berjaya.

Punca Asas

Punca utama terletak pada sokongan terhad untuk manipulasi kelas SVG dalam versi jQuery sebelum v3. Isu ini berpunca daripada fakta bahawa jQuery mengendalikan elemen SVG secara berbeza berbanding dengan elemen HTML.

Penyelesaian

Beberapa penyelesaian hadir sendiri untuk menangani masalah ini:

• Harap jQuery v3: jQuery v3 dan ke atas telah menyelesaikan had ini, membolehkan penambahan dan pengalihan keluar kelas yang lancar daripada elemen SVG menggunakan .addClass() dan .removeClass().
• Adopt Vanilla JavaScript: Penyemak imbas moden menawarkan sokongan asli untuk manipulasi kelas dalam elemen SVG. Memanfaatkan kaedah classList.add() dan classList.remove() menyediakan alternatif yang boleh dipercayai kepada jQuery.
• Memanfaatkan Kaedah .attr() jQuery: Jika anda lebih suka menggunakan jQuery, pertimbangkan menggunakan kaedah .attr() untuk mengubah suai atribut kelas secara langsung.

// Add class using .attr()
$("#item").attr("class", "oldclass newclass");

// Remove class using .attr()
$("#item").attr("class", "oldclass");

• Peluk JavaScript Vanila dengan .setAttribute(): Sebagai alternatif, anda boleh menggunakan JavaScript vanila untuk memanipulasi atribut kelas.

// Add class using .setAttribute()
var element = document.getElementById("item");
element.setAttribute("class", "oldclass newclass");

// Remove class using .setAttribute()
element.setAttribute("class", "oldclass");

Atas ialah kandungan terperinci Mengapa jQuery AddClass() Tidak Berfungsi pada Elemen SVG, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!