jquery - 删除包含一组字符的类

Question

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

我有几个开始的背景颜色覆盖类.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

这应该可以解决问题，同时仍然保留其他类：

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

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

来源取自这里... https://websanova.com/blog/jquery/jquery-remove-class-by-regular-expression

Answer 5

允许更大的灵活性，用户只需要为他们想要删除的每个类返回 true：

$.fn.removeClassBy = function (fun) {
  if (!fun) return
  $(this).removeClass(function (index, classNames) {
    const currentClasses = classNames.split(' '); // change the list into an array
    let classesToRemove = []; // array of classes which are to be removed

    $.each(currentClasses, function (index, className) {
      // if the classname begins with bg add it to the classes_to_remove array
      if (fun(className)) {
        classesToRemove.push(className);
      }
    });
    // turn the array back into a string
    return classesToRemove.join(' ');
  })
}

用法：

$('[class*="some-partial-class-name"]').removeClassBy(className => className.includes('some-partial-class-name'));

Answer 6

试试这个

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