jqueryのtoggle()関数を使って、ボタンのON,OFFを制御する時に、ライブラリを使わなくてもいいようにしたいと考えて、cssで便利に操作できるように、class名をコントロールできる簡単なソースを作ってみました。
使用用途は、任意のエレメントに特定のclass名を追加したり削除して、stylesheetで切り分けた表示を行えるようにします。
追加、削除を切り替えて行えるように"toggle"モードと、手作業でclass名が存在するか確認できるように"check"モードを容易してみました。
ソースコード
;$classValue = (function(){
// mode @ [check , add , del , toggle]
var $$ = function(mode , element , value){
switch(mode){
case "check":
return this.check(element , value);
break;
case "add":
return this.add(element , value);
break;
case "del":
return this.del(element , value);
break;
case "toggle":
return this.toggle(element , value);
break;
}
return false;
};
// 任意エレメントのclass名の検索
// return @ [true : exist , false : none]
$$.prototype.check = function(element , value){
if(!element || !value){return false;}
var className = element.getAttribute("class");
if(!className){
return false;
}
var classNames = className.split(" ");
if(classNames.indexOf(value) !== -1){
return true;
}
else{
return false;
}
};
// 任意のclass名を追加する
// return @ [true : success , false : fail]
$$.prototype.add = function(element , value){
if(!element || !value){return false;}
if(!this.check(element , value)){
element.className += " " + value;
return true;
}
else{
return false;
}
};
// 任意のclass名を除外する
// return @ [true : success , false : fail]
$$.prototype.del = function(element , value){
if(!element || !value){return false;}
var classNames = this.check(element , value);
if(!classNames){
return false;
}
else{
var newClass = [];
for(var i=0; i<classNames.length; i++){
if(classNames[i] === value){continue;}
newClass.push(classNames[i]);
}
element.className = newClass.join(" ");
return true;
}
};
// 任意のclass名を付けたり取ったりする
// return @ ["del" : exist->none , "add" : none->exist]
$$.prototype.toggle = function(element , value){
if(!element || !value){return false;}
if(this.check(element , value)){
this.del(element , value);
return "del";
}
else{
this.add(element , value);
return "add";
}
};
return $$;
})();
使用例
特定ページに上記ソースを読み込んで、まずはインスタンスの作成
var classValue = new $classValue;
次に、任意エレメントに対して、クラス名を追加するには、
classValue.add(element , "hoge")
任意エレメントからクラス名を取り除くには、
classValue.del(element , "hoge")
任意エレメントに、指定のクラス名が存在するか確認刷る場合
classValue.check(element , "hoge")
> true | false
toggleは、任意クラス名が存在していれば削除して、無い場合は追加する処理を行います。
classValue.toggle(element , "hoge")
上記全ての処理に共通するreturn値として、成功、失敗をtrue,falseで返すようにしています。
ちなみに、応用として、"A"と"B"という文字列（class名）を切替toggleで行いたい場合は、以下のようにします。
※どちらかが先に書かれている状態をデフォルトとします。
classValue.toggle(element , "A")
classValue.toggle(element , "B")
こうすることで、それぞれ、追加削除が入れ替わり行われるようになります。
これを便利に使うか、どうかはアナタ次第・・・・
