jquery - jQuery - 删除数组中的类

Question

我有一个 div 对象

<div class="class1 classA classB class2"> content </div>

和一些按钮

<button id="numbers">clickme N </button>

<button id="alphas">clickme A </button>

代码应该执行此功能：

<script>
    var classesN = [class1, class2, class3];
    var classesAlpha = [classA, classB, classC];

    $('#alphas').click(function() {
       $('div').removeClass(all classes that are in the classesAlpha array);
    });
    $('#numbers').click(function() {
       $('div').removeClass(all classes that are in the classesN array);
    })
</script>

感谢您的任何建议，我希望您喜欢这个问题:)

Answer 1

.removeClass( [className] ) :className要从每个匹配元素的类属性中删除一个或多个空格分隔的类。

因此，将您要删除的所有类加入一个空格分隔的列表中。

var classesN = [class1, class2, class3];
var classesAlpha = [classA, classB, classC];

$('#alphas').click(function() {
   $('div').removeClass(classesAlpha.join(' '));
});
$('#numbers').click(function() {
   $('div').removeClass(classesN.join(' '));
});

Answer 2

var classesN = ["class1", "class2", "class3"];
var classesAlpha = ["classA", "classB", "classC"];

$('#alphas').click(function() {
    var $div = $('div');
    $.each(classesAlpha, function(i, v){
       $div.removeClass(v);
    });
});

演示

Answer 3

或者可以不使用数组和 join() 函数。只需将类分配给变量

var classesN = "class1 class2 class3";
var classesAlpha = "classA classB classC";

$('#alphas').click(function() {
   $('div').removeClass(classesAlpha);
});
$('#numbers').click(function() {
   $('div').removeClass(classesN);
});