删除包含一组字符的类

Question

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

我有几个类用于启动qazxsw poi的背景颜色覆盖

.bg

我为一个选择框设置了一个小jquery，它添加并删除了一个元素的修改类，在这种情况下，我需要删除

.bgwhite
.bgblue
.bgyellow

标签，我需要删除这些以<a href id="buttontostyle">开头的类，同时保留另一个类来确定按钮的大小所以这样的事情：

.bg

Answer 1

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

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

    });

但是：ぁzxswい

---

奖金

您可以通过使用命名而不是匿名函数来为代码添加代码，以便您可以多次使用它。

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

Answer 2

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

function () { ... }

Answer 3

试试这个 -

// 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 4

这个怎么样...

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

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

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

Answer 5

试试这个

<code id="card" class="card-logo brand-mastercard">Inspect this element</code>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>