jQuery - loại bỏ một lớp học mà là trong một mảng

Question

Tôi có một đối tượng div

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

và một số nút

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

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

Mã nên làm chức năng này:

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

Cảm ơn cho bất kỳ đề xuất nào và tôi hy vọng bạn thích câu hỏi :)

Answer 1

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

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

DEMO

Answer 2

.removeClass([className]): classNameOne hoặc nhiều hơn các lớp được phân tách bằng dấu cách để được loại bỏ khỏi thuộc tính lớp của mỗi phần tử được so khớp.

Vì vậy, hãy tham gia tất cả các lớp bạn muốn xóa vào danh sách được phân cách bằng dấu cách.

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 3

Hoặc có thể không có mảng và tham gia function(). chỉ cần chỉ định các lớp học cho biến số

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

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