删除包含一组字符的类 [英] removing a class that contains a set of characters

问题描述

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

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

演示: http://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);
});

这篇关于删除包含一组字符的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！