jQueryフォントサイズの変更

フォントサイズを変更するのを作ってみました。

プログの場合、タグリストで分類すると、同じクラス属性がでてくるのでこの場合便利な(idで振分けるのも可能ですが)汎用性考えて、

index(subject)

※　jQueryオブジェクト内で、引数で指定されたエレメントのインデックス番号を返す。インデックスは、ゼロから始まる連番。
もし渡されたエレメントがjQueryオブジェクト内に存在しない場合、戻り値には-1が返る。

を使ってクリックされた項目内だけのプログ内容の文字サイズを変更するようしました。

$("h2.date-header").append("<span>[小]</span><span>[並]</span><span>[大]</span><span class=\"font\" style='_display:none'></span><div>文字サイズ</div>"); //h2タグのクラスdate-header内にhtmlを追加

var fontchange = $("h2.date-header span").not("span.font");
$(fontchange).mouseover(function(){$(this).css("color","red")}).mouseout(function(){$(this).css("color","")}); //必要なspanタグだけaタグのようにリンクぽく振舞わせ･･･

$(fontchange).click(function(){
varFontSize=13; //初期のフォントサイズ
var index = Math.ceil(($(fontchange).index(this)+1)/3)-1; //インデックス番号の取り出し0から始まるので1足して3で割って切捨ててから1戻してます。
if(!index){index = 0;}

var Base = $("div.post-body:eq("+ index + ")");
var BaseFontsize = $(Base).css("font-size").replace("px", "");

if ($(this).is(":contains('小')")){FontSize = BaseFontsize*0.9;} //小がクリックされると･･
else if($(this).is(":contains('大')")){FontSize = BaseFontsize*1.1;}
FontSize = Math.round(FontSize);
$(Base).css('font-size',FontSize+"px");
$("div.textarea",Base).css('font-size',FontSize+"px");
$("span.font:eq("+ index + ")").text(FontSize+"px").show("slow").fadeOut("2000");
});

css は

.date-header span{float:right;cursor:pointer;color:#009;font:12px MS UI Gothic;}
.date-header div{float:right;color:#009;font:12px Arial;}

こんな感じです。