[jQuery] toggleClass - Attributes

$('#btn0').click(function(){
  $('#sample li').toggleClass('blue');
});

.toggleClass( className:string )
指定したクラスがあれば削除、なければ設定する。

属性を取得する

var count = 0;
$('#btn1').click(function(){
  count++;
  $(this).text( 'クリック：'+count+'回' );
  $('#rect1').toggleClass("green", count%3 == 0);
});

.toggleClass( className:string, switch:boolean )
下記の例は、クリック回数が3で割り切れる場合は、class属性をgreenに設定する例です。

クリック：0回

$('#btn2').click(function(){
  var _switch = 'blue' || undefined;
  $('#rect2').toggleClass(_switch);
});

.toggleClass( switch:string )
下記の例は、クリックごとにswitchで定義された条件を実行する。

クリック

$('#btn3').click(function(){
  var _switch = 'blue' || undefined;
  $('#rect3').toggleClass( function(_index, _class, _switch){
    return 'green';
  });
});

.toggleClass( function( index:int, class:string, switch:boolean ) )
下記の例は、クリックごとにfunctionを実行する。

クリック

var count2 = 0;
$('#btn4').click(function(){
  count2++;
  var _switch = 'blue' || undefined;
  $('#rect4').toggleClass( function(_index, _class, _switch){
    return 'green';
  }, count2%3 == 0);
});

.toggleClass( function( index:int, class:string, switch:boolean ), switch2 )
下記の例は、クリックごとにfunctionを実行、かつswitch2判別も実行する。

クリック