JavaScriptにハマってます（悪い意味で）

お世話になっております、たかおファンです。

最近はJavaとは全然違うくせに名前の似ているJavaScriptの開発で四苦八苦しました。
この苦行を通して得たノウハウをざっと紹介しようかと。
主にjQuery使ってるのでそれ前提にはなしますよ、と。

クリックとかのイベントにリスナ関数を設定するじゃないですか～

function Hoge() {
	this.ten = 100;
	$('#hoge').click(function(){
		alert(this.ten);
	});
}

なんかうっかりこんなコード書いちゃって、100が表示されると思うじゃないですか。
しかし、イベントリスナなんでthisの参照先はHogeじゃ無くて、#hogeのオブジェクトなんですよね。
イベントリスナでHogeを参照したい～～ってどうしても思ったときにひらめいた姑息な手段。

function Hoge() {
	this.ten = 100;
	var self = this;
	$('#hoge').click(function(){
		alert(self.ten);
	});
}

thisの参照をselfにコピーすればいいとか。
でもなんだかjQuery1.4ではこれを解決するproxyなる新機能が現れたとか。。。

PHPでいうregister_globalsみたいな厄介な仕様。

<div id="hoge">Hoge!</div>

hoge = new Hoge();

こうやるとIEでは怒られます。divのidと変数名が被ってしまったためです。
この場合IEではhogeという変数はdivオブジェクトを指しています。なんで、だめらしいです。明示的にvar付けて別変数として定義するか、なんらかの対策が必要だそうで。

$("<span>hoge</span>").wrap('<p></p>');

ぐぎゃーーー！いくらやってもpタグで囲われないっっっ！！
。。。ともがいていましたが、実はwrap()はDOMツリー上に存在する要素にしか使えないそうです。つまり、

$("<span>hoge</span>").appendTo("#hoge").wrap('<p></p>');

ならばうまくいくとか。

とりあえずこんだけ！

はちゅねとユカイな仲間達

初音ミク。。。もとい「はちゅねミク」とユカイな仲間達（ナイツとVF-25S）です。
ワタクシの机を守護する者たちであります。

そういえば今日は3月9日で「ミクの日」つまり初音ミクの日だそうで。感謝祭ソロコンサートするそうです。ZeppTokyoとか、どんだけ。。。

ニコニコ動画でも生放送するそうですが、1500円とか高すぎでしょ。
39曲とかすさまじい曲数ですが、どうなることやら。

タグ: jQuery

←良い！と思ったらクリックお願いします！

Tweet

この記事を書いた人