jQueryのtoggleClassの例

jQuery toggleClassの例

toggleClass()メソッドは、一致した要素にクラス名がない場合は、それを追加することを意味します。一致した要素にすでにクラス名がある場合は、それを削除します。

簡単な「p」タグの例を見てみましょう。

This is paragraph

$(‘p’).toggleClass(‘highlight’)を呼び出すと、「p」タグにハイライトクラスが追加されます。

This is paragraph

もう一度$(‘p’).toggleClass(‘highlight’)を呼び出すと、「p」タグからハイライトクラスが削除されます。

This is paragraph

toggleClass()は、次のjQueryコードとも同等です。

if ($('p').is('.highlight')) {
    $('p').removeClass('highlight');
}
else{
    $('p').addClass('highlight');
}

jQuery toggleClassの例







  

jQuery toggleClass example

This is paragraph1

This is paragraph2 (toggleClass effect)

This is paragraph3

This is paragraph4 (add/remove effect)