ちょっと前に実装してみたreadmore.jsがもうちょっと簡略化できるようになった。prototype.jsを調べてみたら、イベントを取得とか、オブジェクトにイベントを追加とかはそっちの中に組み込まれてんのな。prototype.jsのほうがクロスブラウザ環境を提供してくれるし、なにより関数のメンテフリーになるのは有り難い。そっちで頑張って貰うこととしよう。
で、実装した内容はこんな感じ。Event.element()とEvent.observe()がそれぞれイベントの取得、オブジェクトにイベントを追加に該当するよう。入れ替えるだけで動くぜー。
function setHandler(){
var d = document.getElementsByClassName('more', "div");
for(var i=0; i<d.length; i++){
Event.observe(d[i],"click",changeClass,true);
d[i].className = 'less';
}
}
function changeClass(e){
var t = Event.element(e);
var pr = t.parentNode;
t.className = (t.className == 'more') ? 'less' : (t.className == 'less') ? 'more' : t.className;
pr.className = (pr.className == 'more') ? 'less' : (pr.className == 'less') ? 'more' : pr.className;
}
Event.observe(window,"load",setHandler,true);
他にもgetElementsByClassNameがオーバーロードされていたので変更してみたりとか。prototype.jsうめぇwww
相変わらずIE6がダメだが。CSSの実装のほうでアウトした。:before/:after疑似クラスが使えねぇせいで表示の切り替えが出来ぬ。クソが。
Comment