删除包含一组字符的类

本文介绍了删除包含一组字符的类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

有没有办法删除开始或包含已定义文本字符串的类?

Is there a way to remove a class that starts or contains a defined text string?

对于从.bg

.bgwhite .bgblue .bgyellow

我为选择框设置了一个小jQuery，该选择框添加和删除元素的修改类，在本例中为<a href id="buttontostyle">标记 我需要删除以.bg开头的这些类，同时保留另一个确定按钮大小的类 像这样:

I've set up a little jquery for a select box that adds and removes modifying classes to an element, in this case an <a href id="buttontostyle"> tag I need to remove these classes that start with .bg, while keeping another class which determines the size of the buttons so something like this:

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

推荐答案

您可以将一个函数传递给removeClass，该函数返回要删除的类的列表.在此功能中，您可以测试一下每个类名是否以bg开头，如果是，则将其添加到要删除的类列表中.

You can pass a function to removeClass which returns a list of classes that you want to remove. In this function, you can test to see if each of the classnames begins with bg, then if it does, add it to a list of classes that you want to remove.

$("#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); });

演示: codepen.io/iblamefish/pen/EhCaH

奖励

您可以通过对回调使用命名而不是匿名函数来整理代码，以便可以多次使用它.

You can neaten up the code by using a named rather than anonymous function for the callback so that you can use it more than once.

// 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); });