jQueryでclassをもちゃもちゃする

基本編(add, remove, toggle, has)

追加

$(要素).addClass(class名);

削除

$(要素).removeClass(class名);

あれば削除、なければ追加

$(要素).toggleClass(class名);

あるかどうかを確認

// あればtrue、なければfalse
$(要素).hasClass(class名);

実装サンプル

<style>
#testdiv {
    padding: 5px;
}
.back-red{
    background: #F00;
}
</style>
<div id="testdiv" class="">
  <input type="button" onclick="addBackRed();" value="背景を赤くする(add)">
  <input type="button" onclick="removeBackRed();" value="背景を赤くするのをやめる(remove)">
  <input type="button" onclick="toggleBackRed();" value="背景の色を切り替える(toggle)">
  <input type="button" onclick="hasBackRed();" value="背景の色が赤いかどうか確認する(has)">
</div>
<script>
function addBackRed(){
    $("#testdiv").addClass("back-red");
}
function removeBackRed(){
    $("#testdiv").removeClass("back-red");
}
function toggleBackRed(){
    $("#testdiv").toggleClass("back-red");
}
function hasBackRed(){
    if ($("#testdiv").hasClass("back-red")){
        alert("赤いです");
    }
    else{
        alert("赤くないです");
    }
}
</script>

応用編？

基本的に、addとremoveとtoggleとhasさえあればなんとかなりそうなので、あとはその組み合わせ。
というか厄介なのはhas。

「複数のclassをすべて持っているかどうか確認したい」
「複数のclassのどれかを持っているかどうか確認したい」
「複数のclassがすべて一致する(過不足がない)かどうか確認したい」
という時のための関数を作ったので置いとく。

複数のclassをすべて持っているかどうか確認したい

function hasAllClass(obj, c){
    var c_list = c.split(" ");
    var retflg = true;
    $(c_list).each(function(i, e){
        if (!obj.hasClass(e)){
            retflg = false;
        }
    });
    return retflg;
}

使用例

<span id="testspan" class="a b c">にゃーん</span>
<script>
  console.log( hasAllClass($("#testspan"), "a b c") ); // true（完全に一致してるのでOK）
  console.log( hasAllClass($("#testspan"), "b c a") ); // true（順番が変わってもOK）
  console.log( hasAllClass($("#testspan"), "a b"  ) ); // true（足りないのはOK）
  console.log( hasAllClass($("#testspan"), "a b d") ); // false（余分なのはNG）
</script>

複数のclassのどれかを持っているかどうか確認したい

function hasEitherClass(obj, c){
    var c_list = c.split(" ");
    var retflg = false;
    $(c_list).each(function(i, e){
        if (obj.hasClass(e)){
            retflg = true;
            return false;
        }
    });
    return retflg;
}

使用例

<span id="testspan" class="a b c">にゃーん</span>
<script>
  console.log( hasEitherClass($("#testspan"), "a b c") ); // true（完全に一致してるのでOK）
  console.log( hasEitherClass($("#testspan"), "b a"  ) ); // true（順番違いや足りないのはOK）
  console.log( hasEitherClass($("#testspan"), "a d"  ) ); // true（存在しないものが混じっててもOK）
  console.log( hasEitherClass($("#testspan"), "d e"  ) ); // false（存在しないものしかないのはNG）
</script>

複数のclassがすべて一致する(過不足がない)かどうか確認したい

function hasOnlyClass(obj, c){
    var cmp_c_list = c.split(" ").sort();
    var tag_c_list = obj.attr("class").split(" ").sort();
    return cmp_c_list.toString() == tag_c_list.toString();
}

使用例

<span id="testspan" class="a b c">にゃーん</span>
<script>
  console.log( hasOnlyClass($("#testspan"), "a b c")   ); // true（完全に一致してるのでOK）
  console.log( hasOnlyClass($("#testspan"), "b a c")   ); // true（順番が変わってもOK！）
  console.log( hasOnlyClass($("#testspan"), "a b"  )   ); // false（足りないのでNG）
  console.log( hasOnlyClass($("#testspan"), "a b c d") ); // false（余分なのでNG）
</script>

参考文献

[jQuery]指定した要素に複数のクラスが存在するか調べる
[JavaScript] 配列の要素を比較する – コピペで使える JavaScript逆引きリファレンス
Javascriptで配列をソートする方法 │ Web備忘録