удаление класса, содержащего набор символов

Question

Есть ли способ удалить класс, который запускает или содержит определенную текстовую строку?

У меня есть несколько классов для цвета фона overides, которые начинаются .bg

.bgwhite 
.bgblue 
.bgyellow 

Я настроил немного JQuery для выбора коробки, которая добавляет и удаляет изменяющие классы элементов, в данном случае <a href id="buttontostyle"> тегов Мне нужно удалить эти классы, которые начинаются с .bg, сохраняя при этом еще один класс, который определяет размер кнопок так что-то вроде этого:

$("#buttoncolors").change(function() // buttoncolors is the select id 
    { 
     var valcolor = $("#buttoncolors").val(); 
     $("#buttontostyle").removeClass("bg" + "*"); 
     $("#buttontostyle").addClass(valcolor); 

    }); 

Answer 1

Вы можете передать функцию removeClass, которая возвращает список классов, которые вы хотите удалить. В этой функции вы можете проверить, будет ли каждое из классов начинаться с bg, а затем, если это так, добавьте его в список классов, которые вы хотите удалить.

$("#buttoncolors").on("change", function() { 
    var valcolor = $("#buttoncolors").val(); 

    $("#buttonstyle").removeClass(function (index, classNames) { 
    var current_classes = classNames.split(" "), // change the list into an array 
     classes_to_remove = []; // array of classes which are to be removed 

    $.each(current_classes, function (index, class_name) { 
     // if the classname begins with bg add it to the classes_to_remove array 
     if (/bg.*/.test(class_name)) { 
     classes_to_remove.push(class_name); 
     } 
    }); 
    // turn the array back into a string 
    return classes_to_remove.join(" "); 
    }); 

    $("#buttonstyle").addClass(valcolor); 
}); 

Демо: http://codepen.io/iblamefish/pen/EhCaH

---

БОНУС

Вы можете обметать до кода с помощью именованный, а не анонимной функции для обратного вызова, так что вы можете использовать его более чем один раз ,

// name the function 
function removeColorClasses (index, classNames) { 
    var current_classes = classNames.split(" "), // change the list into an array 
     classes_to_remove = []; // array of classes which are to be removed 

    $.each(current_classes, function (index, class_name) { 
    // if the classname begins with bg add it to the classes_to_remove array 
    if (/bg.*/.test(class_name)) { 
     classes_to_remove.push(class_name); 
    } 
    }); 
    // turn the array back into a string 
    return classes_to_remove.join(" "); 
} 

Вы можете использовать эту функцию, снова и снова, передав в его имени, где вы обычно пишите function() { ... }

// code that the dropdown box uses 
$("#buttoncolors").on("change", function() { 
    var valcolor = $("#buttoncolors").val(); 

    $("#buttonstyle").removeClass(removeColorClasses); 

    $("#buttonstyle").addClass(valcolor); 
}); 

// another example: add a new button to remove all classes using the same function 
$("#buttonclear").on("click", function() { 
    $("#buttonstyle").removeClass(removeColorClasses); 
}); 

Answer 2

Попробуйте это -

$('#buttontostyle:not([class^="bg"])'); 

Answer 3

Это должно сделать трюк, все еще держа другие классы:

var matches = $('#buttontostyle').attr('class').match(/\bbg\S+/g); 
$.each(matches, function(){ 
    var className = this; 
    $('#buttontostyle').removeClass(className.toString()); 
}); 

Answer 4

Попробуйте

$("#buttontostyle").removeClass('[class^="bg"]');