.toggleClass()【クラス 追加/削除 切替】

メモ

  • 指定したクラスを追加/削除して切替

構文

説明構文戻り値
クラス 追加/削除 切替 .toggleClass( className ) 1.0

String className：クラス名 (複数：スペース区切り) 		jQuery
.toggleClass( className, state ) 1.3

String className：クラス名 (複数：スペース区切り)
Boolean state：追加(true) / 削除(false) 		jQuery
.toggleClass( function [, state ] ) 1.4

function()
引数説明
Integer indexインデックス
String classNameクラス名
Boolean state追加(true) / 削除(false) 状態
(this)処理中DOM要素
戻り値説明
String追加/削除するクラス名 (複数：スペース区切り)
Boolean state：追加(true) / 削除(false) / 切替(省略) 		jQuery
.toggleClass( [state ] ) 1.43.0

Boolean state：追加(true) / 削除(false) / 切替(省略) 		jQuery

関連

例

<style>
.bgcolor1 { background-color:lightgreen; }
.bgcolor2 { background-color:lightsalmon; }
.bgcolor3 { background-color:lightgray; }
.bold { font-weight:bold; }
</style>

<p>【変更前】</p>
<ul>
  <li class="class1 bgcolor1">[class1 bgcolor1]
  <li class="bgcolor2">[bgcolor2]
  <li class="bgcolor3">[bgcolor3]
  <li class="class1 bgcolor1">[class1 bgcolor1]
  <li class="bgcolor2">[bgcolor2]
  <li class="bgcolor3">[bgcolor3]
</ul>

<p>【変更後】</p>
<ul id="id1">
  <li class="class1 bgcolor1">[class1 bgcolor1]
  <li class="bgcolor2">[bgcolor2]
  <li class="bgcolor3">[bgcolor3]
  <li class="class1 bgcolor1">[class1 bgcolor1]
  <li class="bgcolor2">[bgcolor2]
  <li class="bgcolor3">[bgcolor3]
</ul>

<script>
$( "#id1 li.bgcolor1" ).toggleClass("bgcolor1").append(' A("bgcolor1")');
$( "#id1 li.bgcolor2" ).toggleClass("bgcolor1 bgcolor2").append(' B("bgcolor1 bgcolor2")');
$( "#id1 li.bgcolor3" ).toggleClass("bgcolor3", false).append(' C("bgcolor3", false)')
  .toggleClass("bgcolor2", true).append(' D("bgcolor2", true)');

$( "#id1 li" ).toggleClass(function(index, className, state) {
  var newClassName = "";
  if (className.indexOf("class1") !== -1) {
    newClassName = "bgcolor3";
  }
  else {
    newClassName = "bold";
  }
  $(this).append(" E([" + index + "] oldClass=" + className + " / " + state + " / addClass=" + newClassName + ")");
  return newClassName;
}, true);
</script>

【変更前】

  • [class1 bgcolor1]
  • [bgcolor2]
  • [bgcolor3]
  • [class1 bgcolor1]
  • [bgcolor2]
  • [bgcolor3]

【変更後】

  • [class1 bgcolor1]
  • [bgcolor2]
  • [bgcolor3]
  • [class1 bgcolor1]
  • [bgcolor2]
  • [bgcolor3]