2010-09-16

*1284638475*genkoに脚注機能をつけよう

||

a class=footnote(脚注: ほげほげ);/a

||

と書くと本文としては(*)になってくれて、僕のCSS力では脚注・傍注として表示するのは難しいので、とりあえずクリックしたらalertで出すようにしようと思った。

これがそのコード

|javascript|

// 脚注span.footnoteを(*)で表現

$(.footnote).each(function(){

var text = this.innerHTML;

this.innerHTML = (*)

$(this).click(function(){

alert(text);

});

});

||

だけどクリックしてもalertがでないんだよな。何がいけないんだろう？

hr

ああ、わかった、hrを本文の裏に入れたくて#containerでz-index: -2、hrでz-index: -1とかやっていたのがいけないようだ。これは親エレメントの値からの相対値で、これだとhrが-3になってしまう。あと負の値にはあまりしないようだ。多分これが原因でclickイベントをbodyとかが受け取ってしまってたんだろう。コンテナでz-index: 2をしてhrでz-index: -1したら期待通りの挙動になった。