删除包含一组字符的类

有没有办法删除启动或包含已定义文本字符串的类？

我有几个类开始.bg背景颜色覆盖

 .bgwhite .bgblue .bgyellow 

我为一个选择框设置了一个小jquery，它为一个元素添加和删除了修改类，在这种情况下是一个标记我需要删除这些以.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 () { ... }名称来反复使用这个函数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

这应该可以做到这一点，同时仍然保持其他类：

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

Answer 3

试试这个 –

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

Answer 4

这个怎么样…

 // remove class regex expression function $.fn.removeClassRegEx = function(regex) { var classes = $(this).attr('class'); if (!classes || !regex) return false; var classArray = []; classes = classes.split(' '); for (var i = 0, len = classes.length; i < len; i++) if (!classes[i].match(regex)) classArray.push(classes[i]); $(this).attr('class', classArray.join(' ')); }; // run function on #card element $('#card').removeClassRegEx('brand-'); 

 .card-logo { background: black; color: white; } .brand-mastercard { background: red; } 

 Inspect this element  

Answer 5

试试这个

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