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一致した各要素のクラス属性から削除される1つ以上のスペースで区切られたクラス。

したがって、削除するすべてのクラスをスペースで区切られたリストに結合します。

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