Demo

Question

jQuery的.removeClass不能使用任何参数来删除所有类，或者带有一个或多个空格分隔的类名的字符串，或者返回这样一个字符串的函数。我想知道是否有一种方法可以删除原始html中指定的所有类（例如，由jQuery添加的类）。像

之类的东西

$('.myElement').removeClass(function() {return $(this).attr('class').split(' ').slice(1).join(' ')})

删除除第一个类之外的所有类，但如果该元素在html中有多个类，那么它将无法正常工作。

Answer 1

首次加载页面时，您必须复制原始类属性：

$('[class]').each(function() {
    $(this).data('orig-class', this.className);
});

现在，您可以“重置”它：

$elem.attr('class', $elem.data('orig-class'));

Answer 2

在提交任何更改之前，您必须在变量中缓存原始类列表，否则您将无法在以后恢复它。

As far as I tested，所有添加新类（使用jQuery或不使用jQuery）的方法最终都会更改class属性，className属性和classList。< / p>

Answer 3

我认为您无法取回原始属性，因此您需要将其存储在数据中。

例如：

// On load, do this
myElement.data('originalclass', myElement.attr('class'));

// Later on, you can do this
myElement.attr('class', myElement.data('originalclass'));

Answer 4

我刚刚为此制作了一个快速插件......

它取代了原来的addClass函数，因此它存储了你添加的每个类，所以当你不想删除它时，它知道用addClass

添加了哪些类。

这是新的addClass function

jQuery.fn._addClass = jQuery.fn.addClass; // Keep a copy of the addClass function

jQuery.fn.addClass = function( params ) {
    var _params = params.split(' '); // Split the classes into array
    var classes = this.data('classes') || []; // Get the current dynamic classes

    jQuery.each(_params, function( i, c ) {
        classes.push(c);
    }); // push the classes into the array

    this.data('classes', classes); // Re-set all classes
    this._addClass(params); // Add the class with the new addClass function
    return this;
};

这是删除动态类函数

jQuery.fn.remove_dynamic_classes = function() {
    var classes = this.data('classes')
    if( !classes ) return this;
    this.removeClass( classes.join(' ') );
    return this;
};

<强>用法：

$('#test').addClass('one two three');
$('#test').remove_dynamic_classes(); // This will remove classes 'one', 'two', 'three'

这是一个演示

Demo

这可能会有所改善，但现在已经很晚了，明天我可能会看一下。您必须检查元素并使用addClass函数来查看它是否有效。

快速复制版

jQuery.fn._addClass=jQuery.fn.addClass;jQuery.fn.addClass=function(e){var t=e.split(" ");var n=this.data("classes")||[];jQuery.each(t,function(e,t){n.push(t)});this.data("classes",n);this._addClass(e);return this};jQuery.fn.remove_dynamic_classes=function(){var e=this.data("classes");if(!e)return this;this.removeClass(e.join(" "));return this}

仅删除新类

4 个答案:

Demo