Mengapa jQuery addClass() tidak berfungsi dengan Elemen SVG dan Bagaimana Saya Boleh Membetulkannya?

jQuery SVG: Menangani Dilema addClass()

Walaupun jQuery SVG menyediakan cara yang mudah untuk berinteraksi dengan elemen SVG, pengguna mungkin menghadapi kesukaran menambah atau mengalih keluar kelas kepada SVG objek. Isu ini berpunca daripada ketidakupayaan jQuery untuk mengendalikan atribut kelas pada elemen SVG sebelum versi 3.

Memahami Masalah

Kod SVG yang disediakan:

<rect>

Dan jQuery kod:

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

menunjukkan ketidakupayaan jQuery untuk menambah "diklik" kelas ke SVG rect. Walaupun dapat mencetuskan amaran apabila objek diklik, menambah atau mengalih keluar kelas gagal.

Penyelesaian

Pilihan 1: Naik taraf kepada jQuery 3 atau Lebih Tinggi

jQuery 3 memperkenalkan peningkatan ketara dalam keupayaan pengendalian SVGnya, termasuk keupayaan untuk memanipulasi atribut kelas. Menaik taraf kepada jQuery 3 atau lebih baru sepatutnya menyelesaikan isu ini.

Pilihan 2: Gunakan .attr() atau setAttribute() untuk jQuery atau Vanilla JS, Masing-masing

Tanpa menaik taraf kepada jQuery 3, anda boleh menggunakan kaedah .attr() dalam jQuery atau kaedah setAttribute() dalam JavaScript vanilla untuk mengubah suai atribut kelas SVG.

jQuery

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

JavaScript Vanila

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

Dengan menggunakan pendekatan alternatif ini, anda boleh berjaya menambah atau mengalih keluar kelas daripada elemen SVG dalam jQuery atau JavaScript vanila, walaupun tanpa menaik taraf kepada jQuery 3.

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