Bagaimana untuk Mengeluarkan Kelas dengan Cekap dengan Awalan Khusus dalam JavaScript?

Mengurus Kelas dengan Awalan Tertentu

Memanipulasi kelas dalam JavaScript boleh mencabar, terutamanya apabila berurusan dengan berbilang kelas milik kumpulan berbeza dengan awalan unik . Artikel ini meneroka isu biasa: mengalih keluar kelas dengan awalan tertentu daripada elemen DIV dan menggantikannya dengan yang baharu.

Masalahnya

Andaikan anda mempunyai DIV elemen dengan ID "a" yang boleh mempunyai berbilang kelas daripada pelbagai kumpulan. Setiap kumpulan mempunyai awalan tertentu. Walau bagaimanapun, dalam kod JavaScript anda, anda mungkin tidak tahu kelas mana daripada kumpulan tertentu yang diperuntukkan kepada elemen DIV pada masa ini. Matlamat anda adalah untuk mengalih keluar semua kelas dengan awalan seperti "bg" dan menambah yang baharu. Coretan kod berikut menggambarkan isu:

$("#a").removeClass("bg*");

Walau bagaimanapun, kod ini tidak berfungsi seperti yang diharapkan.

Penyelesaian

Pendekatan yang lebih mantap ialah menggunakan ungkapan biasa yang membahagikan nama kelas pada sempadan perkataan dan menapis kelas yang tidak mempunyai awalan yang ditentukan. Berikut ialah contoh:

var prefix = "bg";
var classes = el.className.split(" ").filter(function(c) {
    return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = classes.join(" ").trim();

Sebagai alternatif, anda boleh mencipta mixin jQuery untuk memudahkan proses ini:

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = $.trim(classes.join(" "));
    });
    return this;
};

Untuk menggunakan mixin ini, hanya panggil fungsi removeClassPrefix() pada DIV elemen, menyatakan awalan yang anda mahu alih keluar:

$("#a").removeClassPrefix("bg");

Kemas Kini ES6 (2018)

Dalam JavaScript moden (ES6 dan ke atas), anda boleh menggunakan versi penyelesaian yang lebih mudah:

const prefix = "bg";
const classes = el.className.split(" ").filter(c => !c.startsWith(prefix));
el.className = classes.join(" ").trim();

Kod ini memanfaatkan fungsi anak panah dan kaedah startsWith() untuk menapis kelas secara berkesan dengan yang ditentukan awalan.

Atas ialah kandungan terperinci Bagaimana untuk Mengeluarkan Kelas dengan Cekap dengan Awalan Khusus dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!